{"componentChunkName":"component---src-templates-post-js","path":"/blog/technical-architecture-evolution-in-small-company","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🚴‍♀️ 小公司的技术架构演进","tips":[],"categories":["think"],"datetime":"2020-03-02 20:12:18","noFooter":false,"description":"不算实习也已经从业 5 年，在小公司见证了很多架构从零搭建起来，从零开始承接流量，这里分享下我眼里的大前端技术架构演进","plainTextDescription":"不算实习也已经从业 5 年，在小公司见证了很多架构从零搭建起来，从零开始承接流量，这里分享下我眼里的大前端技术架构演进\n","author":"Ubug","banner":null,"bannerCredit":null,"slug":"/blog/technical-architecture-evolution-in-small-company","tags":["整理","思考","技术演进","flutter"]},"headings":[{"value":"一、背景差异","depth":2},{"value":"二、技术架构罗列 (不涉密)","depth":2},{"value":"1. 前端、后端、服务器和数据库大架构演进","depth":3},{"value":"2. 端技术","depth":3},{"value":"3. 代码管理和持续集成","depth":3},{"value":"4. 前端开发演进","depth":3},{"value":"5. 前端业务技术点","depth":3},{"value":"6. flutter的接入","depth":3},{"value":"7. 后台管理系统","depth":3},{"value":"三、业务目标和需求梳理","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"technical-architecture-evolution-in-small-company\",\n  \"title\": \"🚴‍♀️ 小公司的技术架构演进\",\n  \"date\": \"2020-03-02 20:12:18\",\n  \"author\": \"Ubug\",\n  \"description\": \"不算实习也已经从业 5 年，在小公司见证了很多架构从零搭建起来，从零开始承接流量，这里分享下我眼里的大前端技术架构演进\",\n  \"categories\": [\"think\"],\n  \"tags\": [\"整理\", \"思考\", \"技术演进\", \"flutter\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u5C0F\\u516C\\u53F8\\u548C\\u5927\\u516C\\u53F8\\u7684\\u4EA7\\u54C1\\u76EE\\u6807\\u4E00\\u6837\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u6574\\u4F53\\u601D\\u8DEF\\u6709\\u5F88\\u591A\\u5DEE\\u5F02\\uFF0C\\u800C\\u6BCF\\u4E2A\\u516C\\u53F8\\u4E0D\\u540C\\u9636\\u6BB5\\uFF0C\\u9879\\u76EE\\u9700\\u6C42\\u8FED\\u4EE3\\uFF0C\\u7528\\u6237\\u91CF\\u4E0A\\u5347\\uFF0C\\u90FD\\u4F1A\\u6D89\\u53CA\\u5230\\u67B6\\u6784\\u7684\\u6F14\\u8FDB\\u3002\\u800C\\u5C0F\\u516C\\u53F8\\u4E00\\u4EBA\\u591A\\u804C\\u4F4D\\uFF0C\\u9700\\u6C42\\u53D8\\u66F4\\u9891\\u7E41\\uFF1A\\u6CA1\\u6709\\u4E13\\u4E1A\\u751A\\u81F3\\u4E13\\u804C\\u7684\\u4EA7\\u54C1\\u7ECF\\u7406\\u628A\\u63A7\\u9700\\u6C42\\uFF0C\\u6280\\u672F\\u80FD\\u529B\\u504F\\u4F4E\\uFF1A\\u5927\\u91CF\\u5165\\u95E8\\u4EBA\\u5458\\u548C\\u5B9E\\u4E60\\u751F\\uFF0C\\u8D77\\u70B9\\u8F83\\u4F4E\\uFF1A\\u4E0D\\u9700\\u8981\\u90A3\\u4E48\\u590D\\u6742\\u7684\\u6280\\u672F\\u53D1\\u5C55\\u8DEF\\u7EBF\\u3002\\u8FD9\\u6837\\u7684\\u73AF\\u5883\\u5DEE\\u5F02\\uFF0C\\u5BFC\\u81F4\\u6280\\u672F\\u67B6\\u6784\\u7684\\u6F14\\u8FDB\\u51E0\\u4E4E\\u548C\\u5927\\u516C\\u53F8\\u5DEE\\u5F02\\u5F88\\u5927\\u3002\\u4ECA\\u5929\\u6765\\u5520\\u4E00\\u5520\\u5C0F\\u516C\\u53F8\\u6280\\u672F\\u67B6\\u6784\\u5C42\\u9762\\u7684\\u6F14\\u8FDB\\uFF0C\\u6CA1\\u6709\\u4EE3\\u8868\\u6027\\uFF0C\\u81F3\\u5C11\\u5F88\\u591A\\u662F\\u6211\\u4ECE\\u624B\\u4E2D\\u5806\\u8D77\\u6765\\u7684\\u5168\\u90E8\\u67B6\\u6784\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001\\u80CC\\u666F\\u5DEE\\u5F02\"), mdx(\"p\", null, \"\\u5927\\u516C\\u53F8\\u6280\\u672F\\u652F\\u6301\\u6BD4\\u8F83\\u5B8C\\u5584\\uFF0C\\u5185\\u90E8\\u7684\\u5F00\\u53D1\\u5E73\\u53F0\\u3001\\u7EC4\\u4EF6\\u5E73\\u53F0\\u3001\\u6784\\u5EFA\\u5E73\\u53F0\\u90FD\\u6709\\u73B0\\u6210\\u7684\\uFF0C\\u6709\\u66F4\\u6807\\u51C6\\u5316\\u7684\\u5F00\\u53D1\\u89C4\\u8303\\u3001\\u8BBE\\u8BA1\\u8BED\\u8A00\\u548C\\u5185\\u90E8\\u6C89\\u6DC0\\u7B49\\uFF0CLeader \\u4E00\\u822C\\u4E5F\\u90FD\\u662F\\u975E\\u5E38\\u6709\\u7ECF\\u9A8C\\u7684\\u4EBA\\u3002\\u8FD9\\u4E9B\\u652F\\u6301\\u4E0B\\u7684\\u9879\\u76EE\\u5F00\\u53D1\\uFF0C\\u6280\\u672F\\u67B6\\u6784\\u90FD\\u975E\\u5E38\\u6210\\u719F\\u3002\"), mdx(\"p\", null, \"\\u5C0F\\u516C\\u53F8\\u80FD\\u9009\\u62E9\\u7684\\u5C31\\u6BD4\\u8F83\\u5C11\\u4E86\\uFF0C\\u5916\\u90E8\\u6280\\u672F\\u652F\\u6301\\u51E0\\u4E4E\\u6CA1\\u6709\\uFF0C\\u751A\\u81F3\\u4E91\\u670D\\u52A1\\u5546\\u7684\\u6210\\u5957\\u7684\\u89E3\\u51B3\\u65B9\\u6848(\\u963F\\u91CC\\u4E91\\u3001\\u817E\\u8BAF\\u4E91\\u7B49Paas\\u3001Saas\\u7B49\\u670D\\u52A1)\\u90FD\\u6CA1\\u5F97\\u9009(\\u6210\\u672C\\u6216\\u8005\\u4FDD\\u5BC6)\\uFF0C\\u53EA\\u80FD\\u9009\\u62E9\\u5F00\\u6E90\\u9879\\u76EE\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\u4EBA\\u7684\\u80FD\\u529B\\u786E\\u5B9E\\u6709\\u5F88\\u5927\\u5F71\\u54CD\\uFF0C\\u6CA1\\u6709\\u85AA\\u8D44\\u7ADE\\u4E89\\u529B\\uFF0C\\u6709\\u80FD\\u529B\\u8D1F\\u8D23\\u4EFB\\u9760\\u8C31\\u7684\\u4EBA\\u5F88\\u5C11\\uFF0C\\u4EE3\\u7801\\u8D28\\u91CF\\u4E4B\\u7C7B\\u6700\\u57FA\\u672C\\u7684\\u5730\\u65B9\\u90FD\\u975E\\u5E38\\u4E0D\\u7A33\\u5B9A\\uFF0C\\u90FD\\u662F\\u5F88\\u73B0\\u5B9E\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u867D\\u7136\\u5C0F\\u516C\\u53F8\\u8FD9\\u4E48\\u4E0D\\u582A\\uFF0C\\u4F46\\u662F\\u6709\\u6548\\u5229\\u7528\\u5404\\u79CD\\u8D44\\u6E90\\u3001\\u8E29\\u4E00\\u4E9B\\u5751\\u4E4B\\u540E\\uFF0C\\u6B63\\u5E38\\u7684\\u4E1A\\u52A1\\u642D\\u5EFA\\u8D77\\u6765\\u5176\\u5B9E\\u662F\\u6CA1\\u6709\\u95EE\\u9898\\u7684\\u3002\\u6211\\u4EEC\\u5C0F\\u516C\\u53F8\\u7A33\\u5B9A\\u5F00\\u53D1\\u4EBA\\u5458\\u6CA1\\u6709\\u90A3\\u4E48\\u5927\\uFF0C\\u53E6\\u5916\\u52A0\\u4E0A\\u4E00\\u4E9B\\u5B9E\\u4E60\\u751F\\u8FB9\\u5B66\\u8FB9\\u505A\\u63D0\\u4F9B\\u4E00\\u4E9B\\u652F\\u6301\\uFF0C\\u4E5F\\u786E\\u5B9E\\u642D\\u5EFA\\u8D77\\u6765\\u5F88\\u5927\\u3001\\u5F88\\u590D\\u6742\\u7684\\u9879\\u76EE\\u627F\\u63A5\\u4E00\\u4E9B\\u6D41\\u91CF\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u6211\\u5728\\u5176\\u4E2D\\u4ECE\\u8D1F\\u8D23\\u5F00\\u53D1\\u5230\\u6574\\u4E2A\\u5927\\u524D\\u7AEF\\u5F00\\u53D1\\u8D1F\\u8D23\\u4EBA\\uFF0C\\u5BA2\\u6237\\u7AEF/web\\u7AEF\\u6574\\u4E2A\\u5927\\u4EA7\\u54C1\\u7684\\u5168\\u90E8\\u67B6\\u6784\\u9009\\u578B\\u548C\\u5F00\\u53D1\\uFF1B\\u5F00\\u59CB\\u8D1F\\u8D23web\\u7AEF\\u4E1A\\u52A1\\uFF0C\\u540E\\u6765\\u8D1F\\u8D23\\u90E8\\u5206\\u540E\\u53F0\\u67B6\\u6784\\u7684\\u8BBE\\u8BA1\\u3001\\u9009\\u578B\\u548C\\u642D\\u5EFA\\uFF1B\\u518D\\u8D1F\\u8D23\\u8FC7\\u4E2D\\u95F4\\u5C42\\u7684\\u62BD\\u8C61\\u548C\\u63A5\\u53E3\\uFF0C\\u540E\\u53F0\\u5B8C\\u6574\\u7BA1\\u7406\\u7CFB\\u7EDF\\u7684\\u642D\\u5EFA\\uFF1B\\u6700\\u540E\\u8D1F\\u8D23\\u5305\\u62EC\\u56E2\\u961F\\u548C\\u6280\\u672F\\u65B9\\u5411\\u5728\\u5185\\u7684\\u5927\\u524D\\u7AEF\\u7684\\u5F00\\u53D1\\u548C\\u6574\\u4F53\\u9879\\u76EE\\u63A8\\u8FDB\\u5DE5\\u4F5C\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u6280\\u672F\\u67B6\\u6784\\u7F57\\u5217 (\\u4E0D\\u6D89\\u5BC6)\"), mdx(\"p\", null, \"\\u4E0D\\u4EC5\\u4EC5\\u662F\\u4ECE\\u96F6\\u5F00\\u59CB\\uFF0C\\u8FD8\\u6709\\u4E00\\u4E9B\\u5C55\\u671B\\u56E0\\u4E3A\\u7CBE\\u529B\\u95EE\\u9898\\u6CA1\\u6709\\u5B9E\\u73B0\\uFF0C\\u5176\\u4E2D\\u5F88\\u591A\\u5173\\u952E\\u6280\\u672F\\u56E0\\u4E3A\\u6D89\\u53CA\\u4E1A\\u52A1\\u4FDD\\u5BC6\\u6CA1\\u6709\\u5199\\uFF0C\\u8DDF\\u5F88\\u591A\\u4EBA\\u7684\\u6280\\u672F\\u9009\\u578B\\u80AF\\u5B9A\\u5B58\\u5728\\u4E0D\\u540C\\uFF0C\\u8FD8\\u6709\\u5F88\\u591A\\u56E0\\u4E3A\\u573A\\u666F\\u3001\\u73B0\\u5B9E\\u95EE\\u9898\\u505A\\u7684\\u9519\\u8BEF\\u51B3\\u7B56\\uFF0C\\u4EC5\\u4EC5\\u662F\\u5C55\\u793A\\u6F14\\u8FDB\\u8FC7\\u7A0B\\uFF0C\\u4E0D\\u559C\\u52FF\\u55B7\\u3002\"), mdx(\"h3\", null, \"1. \\u524D\\u7AEF\\u3001\\u540E\\u7AEF\\u3001\\u670D\\u52A1\\u5668\\u548C\\u6570\\u636E\\u5E93\\u5927\\u67B6\\u6784\\u6F14\\u8FDB\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u3010\\u524D\\u7AEF\\u3011\\u3010\\u540E\\u7AEF\\u3011\\u3010\\u6570\\u636E\\u5E93\\u3011\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7B2C\\u4E00\\u7248\\u4E3B\\u8981\\u8FDB\\u884C\\u6700\\u6838\\u5FC3\\u529F\\u80FD\\u5F00\\u53D1\\uFF0C\\u642D\\u5EFA\\u7B80\\u5355\\u7684\\u4E1A\\u52A1\\u4EA4\\u4E92\\u80FD\\u529B\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6709\\u7528\\u6237\\u7CFB\\u7EDF\\u3001\\u5185\\u5BB9\\u7CFB\\u7EDF\\u7B49\\u57FA\\u672C\\u573A\\u666F\\u3002\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u3010\\u524D\\u7AEF\\u3011\\u3010\\u4E2D\\u95F4\\u4EF6\\u3011\\u3010\\u540E\\u7AEF\\u3011\\u3010\\u6570\\u636E\\u5E93\\u3011\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E1A\\u52A1\\u7C7B\\u522B\\u589E\\u591A\\uFF0C\\u590D\\u6742\\u5EA6\\u4E0A\\u5347\\uFF0C\\u4E2D\\u95F4\\u5C42\\u505A\\u6709\\u72B6\\u6001\\u548C\\u6570\\u636E\\u805A\\u5408\\uFF0C\\u540E\\u7AEF\\u505A\\u65E0\\u72B6\\u6001\\u7684\\u6570\\u636E\\u5B58\\u53D6\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u89E3\\u8026\\u4E2D\\u540E\\u53F0\\uFF0C\\u65B9\\u4FBF\\u805A\\u5408\\u6570\\u636E\\uFF0C\\u4E2D\\u53F0\\u5173\\u5FC3\\u5BF9\\u8C61\\u7ED3\\u6784\\u548C\\u63A5\\u53E3\\u5C01\\u88C5\\uFF0C\\u540E\\u53F0\\u5173\\u5FC3\\u6570\\u636E\\u5B58\\u50A8\\u548C\\u6027\\u80FD\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u3010\\u524D\\u7AEF\\u3011\\u3010\\u4E2D\\u95F4\\u4EF6\\u3011\\u3010\\u540E\\u7AEF\\u591A\\u670D\\u52A1\\u3011\\u3010\\u6570\\u636E\\u5E93\\u3011\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u540E\\u7AEF\\u4E0D\\u4EC5\\u4EC5\\u9700\\u8981\\u6570\\u636E\\u7684\\u5B58\\u53D6\\u4E86\\uFF0C\\u8FD8\\u6709\\u66F4\\u591A\\u7684\\u670D\\u52A1\\u9700\\u8981\\u7BA1\\u7406\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u89C6\\u9891\\u8F6C\\u7801\\u3001\\u6587\\u4EF6\\u7BA1\\u7406\\u3001\\u6587\\u4EF6\\u540C\\u6B65\\u7B49\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6DFB\\u52A0\\u7B80\\u5355\\u7684\\u670D\\u52A1\\u72B6\\u6001\\u76D1\\u63A7\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u3010\\u524D\\u7AEF\\u3011\\u3010\\u4E2D\\u95F4\\u4EF6\\u3011\\u3010\\u540E\\u7AEF\\u591A\\u670D\\u52A1\\u3011\\u3010\\u591A\\u6570\\u636E\\u5E93\\u3011\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u65E0\\u7ED3\\u6784\\u5316\\u6570\\u636E\\u9700\\u6C42\\uFF0C\\u6DFB\\u52A0 mongdb \\u548C redis \\u4FDD\\u8BC1\\u6027\\u80FD\\u548C\\u7075\\u6D3B\\u6027\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u3010\\u524D\\u7AEF\\u3011\\u3010\\u4E2D\\u95F4\\u4EF6\\u3011\\u3010\\u540E\\u7AEF\\u591A\\u670D\\u52A1\\u3011\\u3010\\u591A\\u6570\\u636E\\u5E93\\u3011\\u3010\\u591A\\u673A\\u623F\\u3011\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u57FA\\u672C\\u4E1A\\u52A1\\u642D\\u5EFA\\u5B8C\\u6BD5\\uFF0C\\u90E8\\u7F72\\u5230 IDC\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u62C6\\u5206\\u5185\\u7F51\\u670D\\u52A1\\u548C\\u5916\\u7F51\\u670D\\u52A1\\uFF0C\\u5185\\u7F51\\u4F5C\\u4E3A\\u6D4B\\u8BD5\\u73AF\\u5883\\u548C\\u6570\\u636E\\u51C6\\u5907\\u73AF\\u5883\\uFF0C\\u5916\\u7F51\\u6B63\\u5F0F\\u90E8\\u7F72\\u548C\\u8FD0\\u8425\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6587\\u4EF6\\u548C\\u6570\\u636E\\u540C\\u6B65\\u670D\\u52A1\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u3010\\u524D\\u7AEF\\u3011\\u3010\\u4E2D\\u95F4\\u4EF6\\u3011\\u3010\\u540E\\u7AEF\\u591A\\u670D\\u52A1\\u3011\\u3010\\u591A\\u6570\\u636E\\u5E93\\u3011\\u3010\\u591A\\u673A\\u623F\\u3011\\u3010\\u5FAE\\u670D\\u52A1\\u3011\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u670D\\u52A1\\u5C01\\u88C5\\u5FAE\\u670D\\u52A1\\uFF0C\\u9694\\u79BB\\u4E1A\\u52A1\\uFF0C\\u5206\\u5E03\\u5F0F\\u670D\\u52A1\\uFF0C\\u8FD0\\u7EF4\\u76D1\\u63A7\\uFF0C\\u81EA\\u52A8\\u5316\\u8FD0\\u7EF4\\u7B49\")))), mdx(\"p\", null, \"\\u9010\\u6B65\\u6839\\u636E\\u9700\\u6C42\\u6DFB\\u52A0\\u670D\\u52A1\\uFF0C\\u6CA1\\u6709\\u4E00\\u4E0A\\u6765\\u5C31\\u662F\\u5206\\u5E03\\u5F0F\\u6570\\u636E\\u5E93\\uFF0C\\u4E5F\\u4E0D\\u662F\\u4E00\\u4E0A\\u6765\\u5C31\\u662F\\u4E2D\\u95F4\\u4EF6\\u3001\\u670D\\u52A1\\u62C6\\u5206\\u3001\\u5FAE\\u670D\\u52A1\\uFF0C\\u5F88\\u591A\\u90FD\\u662F\\u53D1\\u73B0\\u73B0\\u6709\\u7684\\u67B6\\u6784\\u6709\\u95EE\\u9898\\u624D\\u53BB\\u627E\\u65B9\\u6CD5\\u89E3\\u51B3\\u7684\\u3002\\u5F88\\u591A\\u4E1C\\u897F\\u4E5F\\u90FD\\u662F\\u53D1\\u5C55\\u7684\\u65F6\\u5019\\u51FA\\u73B0\\u9700\\u6C42\\uFF0C\\u7136\\u540E\\u8C03\\u7814\\u548C\\u521D\\u671F\\u5F00\\u53D1\\uFF0C\\u7136\\u540E\\u9010\\u6B65\\u8FED\\u4EE3\\u548C\\u5F00\\u53D1\\u5B8C\\u6210\\u6574\\u4E2A\\u67B6\\u6784\\u3002\"), mdx(\"h3\", null, \"2. \\u7AEF\\u6280\\u672F\"), mdx(\"p\", null, \"\\u4ECE\\u4E00\\u5F00\\u59CB\\u7684 PC Web \\u7AEF\\u4E1A\\u52A1\\u4E3A\\u4E3B\\uFF0C\\u5230\\u73B0\\u5728\\u7684\\u5BA2\\u6237\\u7AEF\\u6280\\u672F\\u4E3A\\u4E3B\\uFF0C\\u4E2D\\u95F4\\u7ECF\\u5386\\u4E86\\u5F88\\u591A\\u7684\\u65B9\\u5411\\u53D8\\u66F4\\uFF0C\\u56E0\\u4E3A\\u8FD9\\u51E0\\u5E74\\u7684\\u79FB\\u52A8\\u4E92\\u8054\\u7F51\\u53D1\\u5C55\\u8D8B\\u52BF\\uFF0C\\u4EE5\\u4E3A\\u9876\\u591A\\u80FD\\u5360\\u5F88\\u5927\\u6BD4\\u4F8B\\uFF0C\\u4F46\\u662F\\u73B0\\u5728\\u624B\\u673A\\u7AEF\\u4E1A\\u52A1\\u5360\\u636E\\u4E86\\u51E0\\u4E4E\\u5168\\u90E8\\uFF0C\\u8FD9\\u5728\\u51E0\\u5E74\\u524D\\u65E0\\u6CD5\\u60F3\\u8C61\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"web / android\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u90FD\\u662F\\u65E2\\u6709\\u7684\\u4E1A\\u52A1\\u76EE\\u6807\\uFF0C\\u5148\\u5B9E\\u73B0\\u6838\\u5FC3\\u73A9\\u6CD5\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"web / ios / android\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E1A\\u52A1\\u634B\\u987A\\u4E4B\\u540E\\u5C06 ios \\u8865\\u8FDB\\u6765\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"web / cms / ios / android\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"cms \\u9762\\u5411\\u5185\\u90E8\\u7684\\u540E\\u53F0\\u7BA1\\u7406\\u7CFB\\u7EDF\\u642D\\u5EFA\\uFF0C\\u6280\\u672F\\u76F8\\u540C\\uFF0C\\u4F46\\u4E5F\\u7B97\\u4E00\\u4E2A\\u4E0D\\u540C\\u7684\\u7AEF\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"ios / android / h5 / web / cms\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u79FB\\u52A8\\u4E3A\\u5148\\uFF0C\\u79FB\\u52A8\\u7AEF\\u80FD\\u529B\\u4F18\\u5148\\u8003\\u8651\\uFF0C\\u8003\\u8651\\u5230\\u5FEB\\u901F\\u8FED\\u4EE3\\u548C\\u7EBF\\u4E0A\\u66F4\\u65B0\\uFF0C\\u7528 h5 Hybird \\u6765\\u5FEB\\u901F\\u5B9E\\u73B0\\u8F7B\\u91CF\\u4E1A\\u52A1\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"flutter / android / ios / h5 / cms\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5FEB\\u901F\\u642D\\u5EFA\\u6027\\u80FD\\u4F18\\u5F02\\u7684\\u5E94\\u7528\\uFF0Cflutter \\u4F5C\\u4E3A\\u91CD\\u70B9\\u6280\\u672F\\u52A0\\u5230\\u5927\\u524D\\u7AEF\\u5168\\u5BB6\\u6876\")))), mdx(\"p\", null, \"\\u5176\\u4E2D\\u7ECF\\u5386\\u4E86\\u5F88\\u591A\\uFF0C\\u5C24\\u5176\\u662F Android IOS \\u91CD\\u590D\\u4E1A\\u52A1\\u8E29\\u5751\\uFF0C\\u6240\\u4EE5\\u540E\\u9762\\u8DE8\\u5E73\\u53F0\\u7684\\u80FD\\u529B\\u8BA9 flutter \\u4F5C\\u4E3A\\u4E3B\\u8981\\u6280\\u672F\\u5B9E\\u73B0\\u5BA2\\u6237\\u7AEF\\u80FD\\u529B\\u3002Web \\u7AEF\\u521A\\u5F00\\u59CB\\u82B1\\u4E86\\u5F88\\u591A\\u7CBE\\u529B\\u505A\\u4E86\\u4E24\\u7248\\u751A\\u81F3\\uFF0C\\u6700\\u540E\\u7ECF\\u8FC7\\u8BC4\\u4F30\\u7F29\\u51CF\\u4E86\\u3002\\u4E0A\\u9762\\u5217\\u4E3E\\u7684\\u53EA\\u662F\\u7AEF\\u548C\\u6280\\u672F\\uFF0C\\u5177\\u4F53\\u6CA1\\u6709\\u8BF4\\u7684\\u4E1A\\u52A1\\u4E5F\\u53D8\\u66F4\\u4E86\\u5F88\\u591A\\u653E\\u5FC3\\u5C31\\u4E0D\\u8BF4\\u4E86\\uFF0C\\u90FD\\u662F\\u6CEA\\u3002\\u73B0\\u5728\\u5927\\u524D\\u7AEF\\u6280\\u672F\\u7684\\u53D1\\u5C55\\u65E5\\u65B0\\u6708\\u5F02\\uFF0C\\u5F88\\u591A\\u80FD\\u529B\\u7684\\u4F7F\\u7528\\u5728\\u4E4B\\u524D\\u65E0\\u6CD5\\u60F3\\u8C61\\u7684\\u6280\\u672F\\u6808\\uFF0C\\u540E\\u6765\\u4E5F\\u7A00\\u758F\\u5E73\\u5E38\\uFF0C\\u5177\\u4F53\\u7684\\u7AEF\\u91CC\\u9762\\u7684\\u6280\\u672F\\u4E0B\\u9762\\u518D\\u8BF4\\u3002web / h5 / flutter \\u90FD\\u662F\\u6211\\u4E00\\u624B\\u8D1F\\u8D23\\u7684\\uFF0C\\u5176\\u4E2D\\u534F\\u4F5C\\u548C\\u4E1A\\u52A1\\u627F\\u63A5\\u7684\\u8F6C\\u6362\\u8FD8\\u633A\\u6709\\u610F\\u601D\\u3002\\u6574\\u4E2A\\u5927\\u524D\\u7AEF\\u7684\\u63A8\\u8FDB\\u7B97\\u662F\\u4E3B\\u8981\\u65E5\\u5E38\\u5DE5\\u4F5C\\uFF0C\\u5176\\u4E2D\\u7684\\u53D1\\u7248\\u8282\\u594F\\u548C\\u6D41\\u7A0B\\u63A8\\u8FDB\\u4E5F\\u90FD\\u662F\\u6211\\u8D1F\\u8D23\\u628A\\u63A7\\u3002\"), mdx(\"h3\", null, \"3. \\u4EE3\\u7801\\u7BA1\\u7406\\u548C\\u6301\\u7EED\\u96C6\\u6210\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u53F2\\u524D\\u9636\\u6BB5\\uFF0C\\u6587\\u4EF6\\u5939\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8FD8\\u6CA1\\u6709\\u534F\\u4F5C\\u7684\\u65F6\\u5019\\uFF0C\\u9700\\u6C42\\u53EA\\u6709\\u6BCF\\u4E2A\\u4EBA\\u642D\\u5EFA\\u81EA\\u5DF1\\u8D1F\\u8D23\\u7684\\u4E1A\\u52A1\\u6838\\u5FC3\\uFF0C\\u6301\\u7EED\\u5F88\\u77ED\\uFF0C\\u9A8C\\u8BC1\\u5173\\u952E\\u6280\\u672F\\u3002\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"gitlab\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4EE3\\u7801\\u4E2D\\u5FC3\\u7BA1\\u7406\\uFF0C\\u9700\\u8981\\u4E00\\u4E9B\\u534F\\u4F5C\\u548C\\u7BA1\\u7406\\u4E86\\uFF0C\\u5185\\u7F51\\u642D\\u5EFA\\u8D77\\u6765\\u4E00\\u4E2A\\u4EE3\\u7801\\u4ED3\\u5E93\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E00\\u662F\\u907F\\u514D\\u4EE3\\u7801\\u4E22\\u5931\\uFF0C\\u4E8C\\u662F\\u6309\\u7167\\u7248\\u672C\\u8BB0\\u5F55\\u6BCF\\u5929\\u7684\\u5F00\\u53D1\\u65E5\\u62A5\\uFF0C\\u4E09\\u662F\\u6D89\\u53CA\\u5230\\u591A\\u4EBA\\u534F\\u4F5C\\u4E86\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"gitlab + gitflow\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u591A\\u4EBA\\u534F\\u4F5C\\u4E4B\\u540E\\uFF0C\\u5927\\u9879\\u76EE\\u9700\\u8981\\u5206\\u652F\\u5F00\\u53D1\\u6A21\\u5F0F\\uFF0C\\u5F15\\u5165 gitflow \\u7684\\u5F62\\u5F0F\\u8F85\\u52A9\\u5F00\\u53D1\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4FDD\\u8BC1 master \\u5206\\u652F\\u53EF\\u7528\\uFF0Cdev \\u5206\\u652F\\u53EF\\u6D4B\\uFF0C\\u529F\\u80FD\\u5206\\u652F\\u65E5\\u5E38\\u5F00\\u53D1\\uFF0C\\u4F46\\u662F\\u5E76\\u672A\\u5F15\\u5165\\u4EE3\\u7801\\u8BC4\\u5BA1\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"gitlab + webhook \\u81EA\\u52A8\\u90E8\\u7F72\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u529F\\u80FD\\u9700\\u8981\\u53CA\\u65F6\\u6D4B\\u8BD5\\uFF0C\\u6BCF\\u4E2A\\u529F\\u80FD\\u5408\\u5E76\\u5230\\u5206\\u652F\\u4E0A\\u540E\\uFF0C\\u9700\\u8981\\u6BCF\\u6B21\\u90FD\\u62C9\\u53D6\\u4EE3\\u7801\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E8E\\u662F\\u6211\\u8FD9\\u8FB9\\u5C01\\u88C5\\u4E86\\u4E00\\u4E2A\\u5C0F\\u670D\\u52A1\\u653E\\u5230\\u6D4B\\u8BD5\\u670D\\u52A1\\u5668\\uFF0C\\u6BCF\\u6B21\\u65B0\\u529F\\u80FD\\u5408\\u5E76\\uFF0C\\u90FD\\u81EA\\u52A8\\u90E8\\u7F72\\u5230\\u6D4B\\u8BD5\\u73AF\\u5883\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"gitlab + merge request + review\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4EBA\\u624B\\u591A\\u4E86\\u4E4B\\u540E\\u4EE3\\u7801\\u8D28\\u91CF\\u6CA1\\u6CD5\\u4FDD\\u8BC1\\uFF0C\\u5F15\\u5165 MR \\u548C Code Review \\u673A\\u5236\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E00\\u65B9\\u9762\\u660E\\u663E\\u4E0D\\u53EF\\u9760\\u7684\\u4EE3\\u7801\\u80FD\\u5F53\\u573A\\u68C0\\u67E5\\uFF0C\\u800C\\u4E14\\u65B9\\u4FBF\\u6307\\u5BFC\\u5B9E\\u4E60\\u751F\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"gitlab + jenkins + git precommit + linter + issue \\u8DDF\\u8E2A\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4EE3\\u7801\\u4E34\\u8FD1\\u90E8\\u7F72\\u4E0A\\u7EBF\\uFF0C\\u8D28\\u91CF\\u4FDD\\u8BC1\\u7684\\u9700\\u6C42\\u4E0B\\uFF0C\\u6DFB\\u52A0\\u6301\\u7EED\\u96C6\\u6210\\u529F\\u80FD\\uFF0C\\u914D\\u5408 docker \\u5FAE\\u670D\\u52A1\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u672C\\u5730\\u5F00\\u53D1\\u73AF\\u5883\\u63D0\\u4EA4\\u524D\\u8FD0\\u884C lint\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u670D\\u52A1\\u7AEF\\u5206\\u652F\\u5408\\u5E76\\u540E\\u81EA\\u52A8\\u8FD0\\u884C\\u4E00\\u4E9B\\u6838\\u5FC3\\u7684\\u6D4B\\u8BD5\\u7528\\u4F8B\\u4FDD\\u8BC1\\u6CA1\\u6709\\u5927\\u95EE\\u9898\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6709\\u6D4B\\u8BD5\\u4EBA\\u5458\\u4E13\\u95E8\\u6D4B\\u8BD5\\u5E76\\u63D0\\u4EA4 issue\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"gitlab + \\u5236\\u54C1\\u5E93\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6BCF\\u4E2A\\u670D\\u52A1\\u548C\\u90E8\\u7F72\\u90FD\\u5C01\\u88C5\\u6210\\u6807\\u51C6\\u5236\\u54C1\\uFF0C\\u5BF9\\u5916\\u63D0\\u4F9B\\u7EDF\\u4E00\\u7684\\u7AEF\\u53E3\\u548C\\u4F9D\\u8D56\")))), mdx(\"p\", null, \"\\u76EE\\u524D\\u5185\\u7F51\\u7684\\u9879\\u76EE\\u6709\\u51E0\\u5341\\u4E2A\\uFF0C\\u5927\\u90E8\\u5206\\u90FD\\u6709\\u5B8C\\u6574\\u7684\\u6587\\u6863\\u652F\\u6301\\uFF0C\\u6587\\u6863\\u6A21\\u677F\\u53EF\\u4EE5\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/project-readme\"\n  }, \"\\uD83D\\uDCD2 \\u9879\\u76EE\\u8BF4\\u660E\\u600E\\u4E48\\u5199 - Readme \\u7684\\u81EA\\u6211\\u4FEE\\u517B\"), \"\\uFF0C\\u534F\\u4F5C\\u6548\\u7387\\u548C\\u4EE3\\u7801\\u8D28\\u91CF\\u90FD\\u8D8A\\u6765\\u8D8A\\u9AD8\\u3002\"), mdx(\"h3\", null, \"4. \\u524D\\u7AEF\\u5F00\\u53D1\\u6F14\\u8FDB\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"fis + smarty + yii2\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u56E0\\u4E3A\\u9879\\u76EE\\u6BD4\\u8F83\\u65E9\\u671F\\uFF0CWeb \\u5F88\\u91CD\\uFF0C\\u505A\\u5185\\u5BB9\\u9700\\u8981 SEO\\uFF0C\\u4E0D\\u80FD\\u90FD\\u5806\\u5230\\u5BA2\\u6237\\u7AEF\\uFF0C\\u670D\\u52A1\\u7AEF\\u6E32\\u67D3\\u9875\\u9762\\u7684\\u4E00\\u4E2A\\u89E3\\u51B3\\u65B9\\u6848\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u652F\\u6301\\u6A21\\u5757\\u5316\\u3001\\u7EC4\\u4EF6\\u5316\\u3001\\u8D44\\u6E90\\u538B\\u7F29\\u3001\\u90E8\\u7F72\\u7B49\\u9700\\u6C42\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u524D\\u7AEF\\u4E5F\\u8D1F\\u8D23\\u540E\\u53F0\\u6E32\\u67D3\\u5C42\\u7684\\u5B9E\\u73B0\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"fis \\u7EC4\\u4EF6\\u5E93\\uFF0C\\u89E3\\u51B3\\u65B9\\u6848\\u5C01\\u88C5\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E1A\\u52A1\\u6DF1\\u5165\\u4E4B\\u540E\\uFF0C\\u5F88\\u591A\\u4E1A\\u52A1\\u7EC4\\u4EF6\\u5C01\\u88C5\\u3001\\u62C6\\u5206\\u3001\\u62BD\\u8C61\\u51FA\\u6765\\u4E86\\u7EC4\\u4EF6\\u5E93\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5305\\u62EC\\u8054\\u5408\\u540E\\u7AEF\\u7684\\u591A\\u8BED\\u8A00\\u652F\\u6301\\u3001\\u9875\\u9762\\u591A\\u7AEF\\u5C55\\u793A\\u3001\\u5927\\u6587\\u4EF6\\u4E0A\\u4F20\\u3001\\u5BCC\\u6587\\u672C\\u7F16\\u8F91\\u5668\\u3001p2p \\u3001\\u64AD\\u653E\\u5668\\u7B49\\u65B9\\u6848\\u5C01\\u88C5\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"fis + vue\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u51FA\\u73B0\\u4E00\\u4E9B\\u590D\\u6742\\u4E1A\\u52A1\\uFF0C\\u6BD4\\u5982\\u4E2A\\u4EBA\\u4E3B\\u9875\\u3001IM \\u7B49\\u9700\\u8981\\u590D\\u6742\\u4EA4\\u4E92\\u7684\\u754C\\u9762\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F15\\u5165 vue \\u5BA2\\u6237\\u7AEF\\u6846\\u67B6\\uFF0C\\u65B9\\u4FBF\\u8FDB\\u884C\\u590D\\u6742\\u7684\\u4E1A\\u52A1\\u805A\\u5408\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"vue \\u7EC4\\u4EF6\\u5E93 \\u76F8\\u5173\\u89E3\\u51B3\\u65B9\\u6848 \\u7EC4\\u4EF6\\u5E93\\u5E73\\u53F0\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8FD9\\u90E8\\u5206\\u9875\\u9762\\u589E\\u591A\\u7684\\u65F6\\u5019\\uFF0C\\u540C\\u6837\\u62BD\\u8C61\\u51FA\\u6765\\u4E86\\u7EDF\\u4E00\\u7684\\u7EC4\\u4EF6\\u5E93\\uFF0C\\u642D\\u5EFA\\u4E86\\u80FD\\u591F\\u5728\\u7EBF\\u9884\\u89C8\\u548C\\u7248\\u672C\\u7BA1\\u7406\\u7684\\u7EC4\\u4EF6\\u5E93\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u524D\\u7AEF\\u5DE5\\u7A0B\\u5316\\u65B9\\u6848 zfes\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6839\\u636E\\u5B9E\\u8DF5\\u9700\\u6C42\\uFF0C\\u52A0\\u4E0A vue \\u76F8\\u5173\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u62BD\\u8C61\\u51FA zfes \\u7684\\u5DE5\\u7A0B\\u5316\\u65B9\\u6848\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u652F\\u6301\\u547D\\u4EE4\\u884C\\u5DE5\\u5177\\u3001\\u9879\\u76EE\\u7EC4\\u7EC7\\u65B9\\u6CD5\\u3001\\u591A\\u7EA7\\u7248\\u672C\\u5316\\u7EC4\\u4EF6\\u7CFB\\u7EDF\\uFF0C\\u9884\\u8BBE Mock \\u63A5\\u53E3\\u3001I18N \\u591A\\u8BED\\u8A00\\u3001AB \\u6D4B\\u8BD5\\u3001\\u591A\\u5C42\\u515C\\u5E95\\u7684\\u6570\\u636E\\u8BF7\\u6C42\\u5C42\\u7B49\\u5DE5\\u5177\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"react antd cms\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5728\\u9700\\u8981\\u540E\\u53F0\\u7BA1\\u7406\\u7CFB\\u7EDF\\u7684\\u9636\\u6BB5\\uFF0C\\u5F15\\u5165 Antd \\u8BBE\\u8BA1\\u548C react \\u6280\\u672F\\u6808\\uFF0C\\u642D\\u5EFA\\u8D77\\u6765\\u5341\\u591A\\u4E2A\\u5B50\\u7CFB\\u7EDF\\uFF0C\\u8FD1\\u767E\\u9875\\u9762\\u7684 cms \\u7BA1\\u7406\\u7CFB\\u7EDF\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"react spa typescript\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9700\\u8981\\u4E00\\u4E9B\\u590D\\u6742\\u7684\\u5355\\u9875\\u5E94\\u7528\\uFF0C\\u4E8E\\u662F\\u91C7\\u7528 react \\u6280\\u672F\\u6808\\u5B9E\\u73B0\\u590D\\u6742\\u529F\\u80FD\\u7684\\u5355\\u9875\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u540C\\u65F6\\u5F15\\u5165 typescript \\u6280\\u672F\\u6808\\u63D0\\u9AD8\\u534F\\u4F5C\\u6548\\u7387\\u548C\\u4EE3\\u7801\\u8D28\\u91CF\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u7EC4\\u4EF6\\u5E93\\u548C\\u5168\\u94FE\\u8DEF\\u524D\\u7AEF\\u6E10\\u8FDB\\u5F0F\\u65B9\\u6848 kitu\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u81EA\\u5DF1\\u5E73\\u65F6\\u7684\\u51C6\\u5907\\u7684\\u5B9E\\u73B0\\u4E2D\\uFF0C\\u62BD\\u8C61\\u51FA\\u4E00\\u4E2A\\u5168\\u94FE\\u8DEF\\u7684\\u6E10\\u8FDB\\u5F0F\\u5DE5\\u7A0B\\u65B9\\u6848\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u65B9\\u6848\\u672C\\u8EAB\\u53EA\\u63D0\\u4F9B\\u63D2\\u4EF6\\uFF0C\\u5168\\u90E8\\u8FD0\\u884C\\u811A\\u672C\\u8DDF\\u968F\\u9879\\u76EE\\uFF0C\\u4E0D\\u518D\\u9ED1\\u76D2\\u5305\\u88F9\\u5168\\u90E8\\u7684\\u903B\\u8F91\\uFF0C\\u4F4E\\u4FB5\\u5165\\u6027\\u548C\\u7EC6\\u7C92\\u5EA6\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"taro h5 \\u5C0F\\u7A0B\\u5E8F\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5BF9\\u5916\\u63D0\\u4F9B\\u5F88\\u591A\\u7684 h5 \\u9875\\u9762\\u5F00\\u59CB\\u9700\\u8981\\u5C0F\\u7A0B\\u5E8F\\u7248\\u672C\\uFF0C\\u8003\\u8651\\u5230\\u5DE5\\u4F5C\\u91CF\\u5F15\\u5165 taro\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"h5\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6734\\u7D20\\u8425\\u9500\\u7684 h5 \\u4E00\\u76F4\\u6CA1\\u6709\\u65AD\\u8FC7\\uFF0C\\u5229\\u7528 jQuery \\u8F85\\u52A9\\u5B9E\\u73B0\\u4E00\\u4E9B\\u7B80\\u5355\\u7684\\u4EA4\\u4E92\\u548C\\u4E1A\\u52A1\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"flutter\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u65B0\\u4E1A\\u52A1\\u8C03\\u7814\\u540E\\uFF0C\\u91C7\\u7528 flutter \\u4F5C\\u4E3A\\u591A\\u7AEF\\u5F00\\u53D1\\u7684\\u5C1D\\u8BD5\\uFF0C\\u7ED3\\u679C\\u4E0D\\u9519\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9664\\u4E86\\u6D89\\u53CA\\u5E95\\u5C42\\u8F83\\u591A\\u7684\\u90E8\\u5206\\uFF0C\\u65B0\\u4E1A\\u52A1\\u5927\\u90E8\\u5206\\u4EA4\\u4E92\\u9875\\u9762\\u90FD\\u662F\\u7528 flutter \\u642D\\u5EFA\")))), mdx(\"p\", null, \"\\u524D\\u7AEF\\u7684\\u6280\\u672F\\u6808\\u53D7\\u5916\\u754C\\u5F71\\u54CD\\u5F88\\u5927\\uFF0C\\u56E0\\u4E3A\\u6211\\u672C\\u4EBA\\u4E5F\\u662F\\u613F\\u610F\\u5C1D\\u8BD5\\u65B0\\u7684\\u6280\\u672F\\u80FD\\u529B\\u3002\\u4E00\\u4E2A\\u65B0\\u7684\\u6280\\u672F\\u751F\\u6001\\u6D3B\\u8DC3\\uFF0C\\u751F\\u4EA7\\u73AF\\u5883\\u6709\\u6210\\u719F\\u4EA7\\u54C1\\uFF0C\\u63D0\\u5347\\u6548\\u7387\\uFF0C\\u6CA1\\u6709\\u7406\\u7531\\u4E0D\\u80FD\\u5F15\\u5165\\u8FDB\\u6765\\uFF0C\\u8FD8\\u80FD\\u9632\\u6B62\\u6280\\u672F\\u67B6\\u6784\\u8001\\u65E7\\u7684\\u601D\\u7EF4\\u5B9A\\u5F0F\\uFF0C\\u63A2\\u7D22\\u4E1A\\u52A1\\u7684\\u8868\\u73B0\\u5F62\\u5F0F\\u7B49\\u3002PC \\u7AEF\\u7684\\u9700\\u6C42\\u9010\\u6B65\\u964D\\u4F4E\\uFF0C\\u7AEF\\u5185 H5 \\u9700\\u6C42\\u4E00\\u76F4\\u65FA\\u76DB\\uFF0C\\u4F46\\u662F\\u4EA4\\u4E92\\u4F53\\u9A8C\\u4E0D\\u53CAFlutter\\u3002\\u5C24\\u5176\\u662F flutter \\u8FD8\\u662F\\u5728\\u6211\\u529B\\u8350\\u4E0B\\u5C1D\\u8BD5\\u63A5\\u5165\\u5BA2\\u6237\\u7AEF\\u4EA7\\u54C1\\uFF0C\\u5728\\u4E3B\\u8981\\u5DE5\\u4F5C\\u754C\\u9762\\u4E0A\\uFF0C\\u5DE5\\u4F5C\\u6548\\u7387\\u548C\\u8868\\u73B0\\u529B\\u4E0A\\u4F18\\u4E8E\\u539F\\u751F\\uFF0C\\u5F15\\u5165\\u540E\\u7684\\u8FED\\u4EE3\\u6548\\u7387\\u548C\\u7EC4\\u4EF6\\u5F00\\u53D1\\u4E0A\\u6BD4\\u4E4B\\u524D\\u63D0\\u6548\\u5F88\\u591A\\u3002\"), mdx(\"h3\", null, \"5. \\u524D\\u7AEF\\u4E1A\\u52A1\\u6280\\u672F\\u70B9\"), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u7684\\u6280\\u672F\\u5DE5\\u4F5C\\u90FD\\u662F\\u5728\\u5806\\u9875\\u9762\\uFF0C\\u6240\\u4EE5\\u9664\\u4E86\\u7EC4\\u4EF6\\u62BD\\u79BB\\u4E4B\\u5916\\u7684\\u4E1A\\u52A1\\u5E76\\u4E0D\\u662F\\u5F88\\u590D\\u6742\\uFF0C\\u4E00\\u4E9B\\u5927\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\u4E0A\\u9762\\u8BF4\\u4E86\\uFF0C\\u53E6\\u5916\\u6709\\u4E00\\u90E8\\u5206\\u5355\\u72EC\\u82B1\\u4E86\\u7CBE\\u529B\\u5B8C\\u6210\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5927\\u6587\\u4EF6\\u3001\\u591A\\u6587\\u4EF6\\u4E0A\\u4F20\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u56E0\\u4E3A\\u73B0\\u6709\\u7684\\u4E0A\\u4F20\\u670D\\u52A1\\u548C\\u5F00\\u6E90\\u7684\\u4E0D\\u662F\\u5F88\\u517C\\u5BB9\\uFF0C\\u6240\\u4EE5\\u81EA\\u884C\\u5B9E\\u73B0\\u4E86\\u4E00\\u4E2A\\u5206\\u7247\\u4E0A\\u4F20\\u7684\\u529F\\u80FD\\uFF0C\\u53EF\\u4EE5\\u65AD\\u70B9\\u4E0A\\u4F20\\u3001\\u5931\\u8D25\\u91CD\\u8BD5\\u3001\\u5E76\\u884C\\u4E0A\\u4F20\\u3001\\u79D2\\u4F20\\u3001\\u754C\\u9762\\u8FDB\\u5EA6\\u63D0\\u793A\\u7684\\u4E0A\\u4F20\\u7EC4\\u4EF6\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u591A\\u8BED\\u8A00\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8054\\u5408\\u4E2D\\u95F4\\u4EF6\\uFF0C\\u652F\\u6301\\u4E86\\u591A\\u8BED\\u8A00\\u529F\\u80FD\\uFF0C\\u540C\\u754C\\u9762\\u591A\\u8BED\\u8A00\\u652F\\u6301\\uFF0C\\u652F\\u6301 po \\u6587\\u4EF6\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5BCC\\u6587\\u672C\\u7F16\\u8F91\\u5668\\u76F8\\u5173\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F00\\u53D1\\u7B80\\u5355\\u7684\\u5185\\u5BB9\\u53D1\\u5E03\\u5668\\uFF0C\\u7B80\\u5355\\u7684\\u5BCC\\u6587\\u672C\\u7F16\\u8F91\\u5668\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u652F\\u6301\\u8BDD\\u9898\\u3001\\u8868\\u60C5\\u548C @ \\u6DF7\\u6392\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u64AD\\u653E\\u5668\\u76F8\\u5173\\u5C01\\u88C5\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u652F\\u6301\\u64AD\\u653E flv\\u3001HLS \\u5185\\u5BB9\\u7684\\u64AD\\u653E\\u5668\\uFF0C\\u652F\\u6301\\u8FDB\\u5EA6\\u6761\\u9884\\u89C8\\u3001\\u524D\\u7F6E\\u5E7F\\u544A\\u3001\\u6E05\\u6670\\u5EA6\\u5207\\u6362\\u3001\\u64AD\\u653E\\u901F\\u5EA6\\u7B49\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u652F\\u6301\\u9274\\u6743\\u64AD\\u653E\\u3001\\u591A\\u5267\\u96C6\\u8FDE\\u64AD\\u3001\\u5386\\u53F2\\u8FDB\\u5EA6\\u7B49\\u529F\\u80FD\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u652F\\u6301\\u76F4\\u64AD\\u3001\\u5F39\\u5E55\\u3001\\u793C\\u7269\\u3001\\u804A\\u5929\\u5BA4\\u7684\\u80FD\\u529B\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Web IM\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4ECE\\u5E95\\u5C42\\u5C01\\u88C5\\u5B8C\\u6574\\u529F\\u80FD\\u7684 IM \\u529F\\u80FD\\uFF0C\\u597D\\u53CB\\u7BA1\\u7406\\u3001\\u901A\\u77E5\\u3001\\u6D88\\u606F\\u7BA1\\u7406\\u3001\\u53EF\\u6269\\u5C55\\u7684\\u6D88\\u606F\\u7C7B\\u578B\\u7B49\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u652F\\u6301\\u8BED\\u97F3\\u3001\\u89C6\\u9891\\u3001\\u56FE\\u7247\\u3001\\u5730\\u7406\\u4F4D\\u7F6E\\u3001\\u97F3\\u89C6\\u9891\\u901A\\u8BDD\\u7B49\\u529F\\u80FD\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u591A\\u9875\\u9762\\u590D\\u7528\\u5355 ws \\u901A\\u9053\\u7684\\u80FD\\u529B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5E95\\u5C42\\u8FDE\\u63A5\\u4FE1\\u4EE4\\u548C\\u4E0A\\u5C42\\u4E0D\\u540C\\u804A\\u5929\\u4E1A\\u52A1\\u5206\\u79BB\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Hybird \\u548C h5 \\u540C\\u6784\\u80FD\\u529B\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"p2p\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5B9E\\u73B0 P2P \\u901A\\u4FE1\\uFF0C\\u652F\\u6301\\u97F3\\u89C6\\u9891\\u901A\\u8BDD\\u3001\\u591A\\u4EBA P2P Mesh \\u548C\\u5176\\u4ED6\\u590D\\u6742\\u529F\\u80FD\\u7684\\u70B9\\u5BF9\\u70B9\\u4E1A\\u52A1\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u524D\\u7AEF\\u5DE5\\u7A0B\\u5316\\u65B9\\u6848 zfes\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6839\\u636E\\u5B9E\\u8DF5\\u9700\\u6C42\\uFF0C\\u52A0\\u4E0A vue \\u76F8\\u5173\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u62BD\\u8C61\\u51FA zfes \\u7684\\u5DE5\\u7A0B\\u5316\\u65B9\\u6848\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E3B\\u8981\\u662F\\u8F85\\u52A9\\u65E5\\u5E38\\u5F00\\u53D1\\u6D41\\u7A0B\\uFF0C\\u628A\\u4E00\\u4E9B\\u5DE5\\u7A0B\\u5316\\u7684\\u4E1C\\u897F\\u5355\\u72EC\\u62BD\\u53D6\\u51FA\\u6765\\u590D\\u7528\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u652F\\u6301\\u547D\\u4EE4\\u884C\\u5DE5\\u5177\\u3001\\u9879\\u76EE\\u7EC4\\u7EC7\\u65B9\\u6CD5\\u3001\\u591A\\u7EA7\\u7248\\u672C\\u5316\\u7EC4\\u4EF6\\u7CFB\\u7EDF\\uFF0C\\u9884\\u8BBE Mock \\u63A5\\u53E3\\u3001I18N \\u591A\\u8BED\\u8A00\\u3001AB \\u6D4B\\u8BD5\\u3001\\u591A\\u5C42\\u515C\\u5E95\\u7684\\u6570\\u636E\\u8BF7\\u6C42\\u5C42\\u7B49\\u5DE5\\u5177\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u7EC4\\u4EF6\\u5E93\\u548C\\u5168\\u94FE\\u8DEF\\u524D\\u7AEF\\u6E10\\u8FDB\\u5F0F\\u65B9\\u6848 kitu\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u81EA\\u5DF1\\u5E73\\u65F6\\u7684\\u51C6\\u5907\\u7684\\u5B9E\\u73B0\\u4E2D\\uFF0C\\u62BD\\u8C61\\u51FA\\u4E00\\u4E2A\\u5168\\u94FE\\u8DEF\\u7684\\u6E10\\u8FDB\\u5F0F\\u5DE5\\u7A0B\\u65B9\\u6848\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u65B9\\u6848\\u672C\\u8EAB\\u53EA\\u63D0\\u4F9B\\u63D2\\u4EF6\\uFF0C\\u5168\\u90E8\\u8FD0\\u884C\\u811A\\u672C\\u8DDF\\u968F\\u9879\\u76EE\\uFF0C\\u4E0D\\u518D\\u9ED1\\u76D2\\u5305\\u88F9\\u5168\\u90E8\\u7684\\u903B\\u8F91\\u4FB5\\u5165\\u6027\\u5F3A\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E3B\\u8981\\u76EE\\u7684\\u662F\\u5C06\\u6BCF\\u4E2AZFES\\u5DE5\\u7A0B\\u5316\\u7684\\u4E1C\\u897F\\u66F4\\u52A0\\u5B9A\\u5236\\u5316\")))), mdx(\"p\", null, \"\\u5F88\\u591A\\u6280\\u672F\\u6CA1\\u4EC0\\u4E48\\u96BE\\u70B9\\u4F46\\u662F\\u6BD4\\u8F83\\u7E41\\u590D\\u6216\\u8005\\u4E1A\\u52A1\\u5DEE\\u4E0D\\u591A\\u90FD\\u6CA1\\u6709\\u7EC6\\u8BF4\\uFF0C\\u6709\\u5F88\\u591A\\u62BD\\u8C61\\u7684\\u5DE5\\u4F5C\\u5E76\\u6CA1\\u6709\\u4EC0\\u4E48\\u7279\\u522B\\u7684\\u4E5F\\u6CA1\\u8BF4\\uFF0C\\u800C\\u4E14\\u5F88\\u591A\\u90FD\\u662F\\u505A\\u7684\\u65F6\\u5019\\u8E29\\u5751\\u4E0D\\u5C11\\uFF0C\\u56DE\\u60F3\\u8D77\\u6765\\u4E5F\\u5C31\\u90A3\\u6837\\uFF0C\\u6240\\u4EE5\\u503C\\u5F97\\u8BB0\\u5F55\\u7684\\u597D\\u50CF\\u5E76\\u4E0D\\u591A\\u3002\"), mdx(\"p\", null, \"\\u9879\\u76EE\\u7684\\u6C34\\u5E73\\u6269\\u5C55\\u662F\\u5DE5\\u7A0B\\u5316\\u7684\\u9700\\u6C42\\u6765\\u6E90\\uFF0C\\u9879\\u76EE\\u4E2D\\u7684\\u7279\\u5B9A\\u529F\\u80FD\\u662F\\u6DF1\\u5EA6\\u5F00\\u53D1\\u6A21\\u5757\\u7684\\u9700\\u6C42\\u6765\\u6E90\\uFF0C\\u8FD9\\u90E8\\u5206\\u5DE5\\u4F5C\\u662F\\u653B\\u575A\\u9700\\u6C42\\u3002\\u5269\\u4F59\\u7684\\u5C31\\u662F\\u65E5\\u5E38\\u4E1A\\u52A1\\u5F00\\u53D1\\u7684\\u7EF4\\u62A4\\u90E8\\u5206\\u4E86\\u3002\"), mdx(\"h3\", null, \"6. flutter\\u7684\\u63A5\\u5165\"), mdx(\"p\", null, \"flutter \\u76F8\\u5173\\u6587\\u7AE0\\u5199\\u4E86\\u51E0\\u7BC7\\uFF0C\\u53EF\\u4EE5\\u5728\\u5217\\u8868\\u4E2D\\u67E5\\u770B \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/keywords/#flutter\"\n  }, \"flutter\"), \"\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u515C\\u5E95\\u91CD\\u8BD5\\u3001\\u539F\\u751F\\u66FF\\u6362\\u3001Mock\\u3001\\u901A\\u7528\\u72B6\\u6001\\u5904\\u7406\\u7B49\\u529F\\u80FD\\u7684http\\u5E93\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"http \\u5C42\\u9762\\u56E0\\u4E3A\\u6D89\\u53CA\\u5230\\u7684 api \\u8F83\\u591A\\uFF0C\\u800C\\u4E14\\u9700\\u8981\\u91CD\\u8BD5\\u548C\\u9519\\u8BEF\\u63D0\\u793A\\u4FE1\\u606F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E8E\\u662F\\u5355\\u72EC\\u5C01\\u88C5\\u4E86\\u4E00\\u4E2A\\u7F51\\u7EDC\\u63A5\\u53E3\\u5C42\\uFF0C\\u652F\\u6301\\u91CD\\u8BD5\\u3001\\u515C\\u5E95\\u6570\\u636E\\u548C\\u901A\\u7528\\u9519\\u8BEF\\u5904\\u7406\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u62D3\\u5C55\\u4E86\\u4E0B\\u62C9\\u5237\\u65B0\\u4E0A\\u62C9\\u52A0\\u8F7D\\u7684\\u901A\\u7528\\u6EDA\\u52A8\\u7EC4\\u4EF6\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F88\\u591A\\u9875\\u9762\\u7684\\u5185\\u5BB9\\u90FD\\u5C5E\\u4E8E\\u6EDA\\u52A8\\u5217\\u8868\\u7EC4\\u4EF6\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6DFB\\u52A0\\u4E0B\\u62C9\\u5237\\u65B0\\u3001\\u4E0A\\u62C9\\u52A0\\u8F7D\\u7684\\u903B\\u8F91\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6DFB\\u52A0\\u6EDA\\u52A8\\u7EC4\\u4EF6\\u7684\\u901A\\u7528\\u72B6\\u6001\\u7F13\\u5B58\\uFF0C\\u4E0D\\u5FC5\\u4FDD\\u7559\\u7EC4\\u4EF6\\u72B6\\u6001\\uFF0C\\u63D0\\u5347\\u5185\\u5B58\\u8868\\u73B0\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u9875\\u9762\\u6570\\u636E\\u4F18\\u5148\\u7EC4\\u4EF6\\u7F13\\u5B58\\u673A\\u5236\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9875\\u9762\\u5185\\u5B58\\u5360\\u7528\\u4E25\\u91CD\\uFF0C\\u4E8E\\u662F\\u4E0D\\u518D\\u4FDD\\u7559\\u9875\\u9762\\u548C\\u7EC4\\u4EF6\\u7F13\\u5B58\\uFF0C\\u4EC5\\u4FDD\\u7559\\u72B6\\u6001\\uFF0C\\u6BCF\\u6B21\\u5FEB\\u901F\\u91CD\\u5EFA\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u7C7B\\u6296\\u97F3\\u7684\\u6ED1\\u52A8\\u64AD\\u653E\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u652F\\u6301\\u4E0A\\u4E0B\\u6ED1\\u52A8\\u64AD\\u653E\\uFF0C\\u6BD4\\u4F8B\\u9002\\u914D\\uFF0C\\u652F\\u6301\\u53F3\\u6ED1\\u8FDB\\u5165\\u65B0\\u9875\\u9762\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u591A tab \\u6EDA\\u52A8\\u5D4C\\u5957\\u3001\\u80FD\\u591F\\u6682\\u5B58\\u72B6\\u6001\\u7684\\u6EDA\\u52A8\\u7EC4\\u4EF6\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5B98\\u65B9\\u5BF9\\u591A\\u6EDA\\u52A8\\u5D4C\\u5957\\u6EDA\\u52A8\\u7EC4\\u4EF6\\u7684\\u652F\\u6301\\u6BD4\\u8F83\\u5DEE\\uFF0C\\u8FD9\\u91CC\\u7ED3\\u5408\\u4E1A\\u52A1\\u5C01\\u88C5\\u4E86\\u591A\\u4E2A\\u5D4C\\u5957\\u6EDA\\u52A8\\u7684\\u72B6\\u6001\\u6682\\u5B58\\u6062\\u590D\\u529F\\u80FD\\uFF0C\\u6EE1\\u8DB3\\u5206\\u79BB\\u6EDA\\u52A8\\uFF0C\\u8FD8\\u53EF\\u4EE5\\u4ECE\\u72B6\\u6001\\u91CD\\u5EFA\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u6027\\u80FD\\u4F18\\u5316\\uFF0C\\u7A33\\u5B9A\\u6027\\u4F18\\u5316\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u82B1\\u4E86\\u5F88\\u5927\\u7684\\u7CBE\\u529B\\u4F18\\u5316\\u6027\\u80FD\\u548C\\u5185\\u5B58\\u5360\\u7528\")))), mdx(\"p\", null, \"flutter \\u662F\\u4E00\\u4E2A\\u4F18\\u79C0\\u7684\\u8DE8\\u7AEF\\u5F00\\u53D1\\u6280\\u672F\\u6808\\uFF0C\\u4E0E\\u524D\\u7AEF\\u7684\\u76F8\\u5173\\u6280\\u672F\\u5F88\\u4E0D\\u540C\\uFF0C\\u4F46\\u662F\\u611F\\u89C9\\u5F88\\u6709\\u524D\\u666F\\u3002\"), mdx(\"h3\", null, \"7. \\u540E\\u53F0\\u7BA1\\u7406\\u7CFB\\u7EDF\"), mdx(\"p\", null, \"\\u540E\\u53F0\\u7BA1\\u7406\\u7CFB\\u7EDF\\u6BCF\\u4E00\\u4E2A\\u5B50\\u7CFB\\u7EDF\\u90FD\\u5305\\u542B\\u4E86\\u5F88\\u591A\\u7684\\u80FD\\u529B\\u548C\\u9875\\u9762\\uFF0C\\u8FD9\\u91CC\\u4E0D\\u518D\\u7EC6\\u8BF4\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u591A\\u89D2\\u8272\\u548C\\u6743\\u9650\\u7BA1\\u7406\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"cms \\u6570\\u636E\\u67E5\\u770B\\uFF0C\\u7B80\\u5355\\u6570\\u636E\\u5927\\u5C4F\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5185\\u5BB9\\u5BA1\\u6838\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u70ED\\u95E8\\u5185\\u5BB9\\u63A8\\u8350\\u7CFB\\u7EDF\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u81EA\\u52A8\\u9274\\u9EC4\\uFF0C\\u654F\\u611F\\u8BCD\\u7CFB\\u7EDF\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u670D\\u52A1\\u76D1\\u63A7\\u7CFB\\u7EDF\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u4EA4\\u6613\\u5F02\\u5E38\\u7BA1\\u7406\\u7CFB\\u7EDF\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5E94\\u7528\\u53D1\\u5E03\\u7CFB\\u7EDF\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5168\\u7AD9\\u6295\\u8BC9\\u53CD\\u9988\\u5904\\u7406\\u7CFB\\u7EDF\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u6570\\u636E\\u6D4B\\u8BD5\\u3001\\u53D1\\u5E03\\u3001\\u540C\\u6B65\\u7CFB\\u7EDF\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u4E00\\u7AD9\\u5F0F\\u7528\\u6237\\u4FE1\\u606F\\u805A\\u5408\\u7CFB\\u7EDF\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u8425\\u9500\\u6570\\u636E\\u4E2D\\u5FC3\"))), mdx(\"h2\", null, \"\\u4E09\\u3001\\u4E1A\\u52A1\\u76EE\\u6807\\u548C\\u9700\\u6C42\\u68B3\\u7406\"), mdx(\"p\", null, \"\\u4E1A\\u52A1\\u4E0A\\u65E0\\u8BBA\\u5927\\u5C0F\\u516C\\u53F8\\u5176\\u5B9E\\u5927\\u90E8\\u5206\\u90FD\\u662F\\u5B8C\\u6210\\u6838\\u5FC3\\u529F\\u80FD\\uFF0C\\u7136\\u540E\\u9010\\u6B65\\u8FED\\u4EE3\\u9A8C\\u8BC1\\u5546\\u4E1A\\u6A21\\u5F0F\\u6216\\u8005\\u5B8C\\u6210\\u5B8C\\u6574\\u529F\\u80FD\\u3002\"), mdx(\"p\", null, \"\\u5927\\u516C\\u53F8\\u4ECE\\u4EA7\\u54C1\\u4E00\\u5F00\\u59CB\\u5C31\\u6709\\u6709\\u7ECF\\u9A8C\\u7684\\u4EA7\\u54C1\\u7ECF\\u7406\\u68B3\\u7406\\u9700\\u6C42\\uFF0C\\u5BF9\\u63A5\\u9886\\u5BFC\\u3001\\u5F00\\u53D1\\u548C\\u8BBE\\u8BA1\\uFF0C\\u6BCF\\u4E2A\\u4EBA\\u4EFB\\u52A1\\u548C\\u76EE\\u6807\\u6BD4\\u8F83\\u660E\\u786E\\uFF0C\\u6392\\u671F\\u548C\\u4F1A\\u8BAE\\u90FD\\u662F\\u5F88\\u987A\\u5229\\u7684\\u4E8B\\u60C5\\u3002\"), mdx(\"p\", null, \"\\u5C0F\\u516C\\u53F8\\u4E0D\\u592A\\u4E00\\u6837\\u7684\\u662F\\u4EA7\\u54C1\\u7ECF\\u7406\\u7ECF\\u9A8C\\u4E0D\\u8DB3\\uFF0C\\u751A\\u81F3\\u6CA1\\u6709PM\\u8FD9\\u4E2A\\u5C97\\u4F4D\\u3002\\u591A\\u5C97\\u4F4D\\u878D\\u5408\\uFF0C\\u4F46\\u662F\\u4EE5\\u7ECF\\u9A8C\\u6765\\u770B\\uFF0C\\u4ECE\\u5F00\\u53D1\\u89D2\\u5EA6\\u8003\\u8651\\u9700\\u6C42\\u548C\\u7528\\u6237\\u89D2\\u5EA6\\u5C31\\u4F1A\\u5F88\\u4E0D\\u4E00\\u6837\\uFF0C\\u5BFC\\u81F4\\u7ECF\\u5E38\\u6027\\u7684\\u5F00\\u5927\\u4F1A\\u8BA8\\u8BBA\\u4E00\\u4E2A\\u7EC6\\u8282\\u95EE\\u9898\\u3002\\u6700\\u540E\\u5F88\\u6709\\u53EF\\u80FD\\u5F00\\u53D1\\u4E00\\u7FA4\\u4EBA\\u51B3\\u5B9A\\u7684\\u7ED3\\u679C\\uFF0C\\u9886\\u5BFC\\u6216\\u8005\\u7528\\u6237\\u6CA1\\u6CD5\\u63A5\\u53D7\\uFF0C\\u6700\\u540E\\u51FA\\u73B0\\u52A0\\u5F00\\u5173\\u3001\\u90FD\\u505A\\u3001\\u5148\\u51FA Demo \\u770B\\u770B\\u7B49\\u7ED3\\u8BBA\\uFF0C\\u518D\\u6B21\\u53CD\\u590D\\u68B3\\u7406\\u3002\"), mdx(\"p\", null, \"\\u4EA7\\u54C1\\u5B9E\\u73B0\\u8FC7\\u7A0B\\u4E2D\\u4E00\\u5B9A\\u8981\\u6709\\u4E00\\u4E2A\\u89D2\\u8272\\uFF0C\\u80FD\\u5229\\u843D\\u7684\\u8DDF\\u9886\\u5BFC\\u6838\\u5BF9\\u9700\\u6C42\\u548C\\u4E1A\\u52A1\\u76EE\\u6807\\uFF0C\\u843D\\u5B9E\\u6392\\u671F\\u548C\\u610F\\u89C1\\uFF0C\\u4E0D\\u7136\\u6DF7\\u4E71\\u662F\\u80AF\\u5B9A\\u4F1A\\u51FA\\u73B0\\u7684\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u5C0F\\u516C\\u53F8\\u7684\\u4E3B\\u7A0B\\u9700\\u8981\\u6709\\u80FD\\u529B\\u627F\\u62C5\\u8D77\\u8FD9\\u4E2A\\u8D23\\u4EFB\\uFF0C\\u80FD\\u8DDF\\u9886\\u5BFC\\u804A\\u4E1A\\u52A1\\uFF0C\\u80FD\\u5C06\\u7406\\u89E3\\u51FA\\u7684\\u7ED3\\u679C\\u843D\\u5B9E\\u5230\\u5176\\u4ED6\\u4EBA\\u5458\\uFF0C\\u63D0\\u4F9B\\u95EE\\u9898\\u548C\\u89E3\\u51B3\\u65B9\\u6848\\u3002\"), mdx(\"p\", null, \"\\u7406\\u89E3\\u9886\\u5BFC\\u7684\\u9700\\u6C42\\uFF0C\\u80FD\\u591F\\u5BF9\\u672A\\u6765\\u4E00\\u6BB5\\u65F6\\u95F4\\u7684\\u4E1A\\u52A1\\u8FDB\\u884C\\u9884\\u5224\\uFF0C\\u9009\\u62E9\\u5408\\u9002\\u7684\\u6280\\u672F\\u6808\\uFF0C\\u6309\\u65F6\\u3001\\u4FDD\\u8BC1\\u8D28\\u91CF\\u7684\\u5B8C\\u6210\\u9700\\u6C42\\uFF0C\\u8FD9\\u662F\\u6BCF\\u4E00\\u4E2A\\u4EBA\\u5E94\\u8BE5\\u6709\\u7684\\u80FD\\u529B\\uFF0C\\u5728\\u6B64\\u57FA\\u7840\\u4E0A\\u6574\\u4E2A\\u516C\\u53F8\\u7684\\u4E1A\\u52A1\\u548C\\u67B6\\u6784\\u624D\\u4F1A\\u6709\\u8FDB\\u5316\\u3002\"), mdx(\"p\", null, \"\\u5728\\u6211\\u4ECE\\u57FA\\u7840\\u4E1A\\u52A1\\u5F00\\u53D1\\uFF0C\\u5230\\u9700\\u6C42\\u68B3\\u7406\\u548C\\u9879\\u76EE\\u63A8\\u8FDB\\uFF0C\\u6700\\u540E\\u5230\\u9879\\u76EE\\u548C\\u56E2\\u961F\\u7BA1\\u7406\\uFF0C\\u5C06\\u4E00\\u4E2A\\u4EA7\\u54C1\\u9010\\u6B65\\u63A8\\u8FDB\\u5230\\u627F\\u63A5\\u90A3\\u4E48\\u5927\\u6D41\\u91CF\\uFF0C\\u5176\\u4E2D\\u574E\\u5777\\u548C\\u76F8\\u5E94\\u7ECF\\u9A8C\\u771F\\u7684\\u53D7\\u7528\\u5F88\\u591A\\uFF0C\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"b21210c2-f124-5473-9732-6336302a2ae0","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/flutter/flutter-performance.md","id":"0841789b-4d4a-56c2-bf8e-7778bd9770dc","parent":{"name":"flutter-performance","sourceInstanceName":"blog"},"excerpt":"想分享的是让你知道  flutter  开发中遇到的性能问题，和一些很容易的优化方法。 无论用什么语言开发应用的时候，性能和稳定性都是一个更高要求的方面，用 80% 的时间来拔高 20% 的效果。 这里因为业务的 APP 并没有达到那么大的用户量，所以不需要太深入，毕竟收益能效还不到深入的时候，所以这里也是仅仅优化常见的业务问题，比如非常影响性能的地方。 一、使用最佳实践 Performance best practices…","fields":{"title":"💊 flutter 性能优化","slug":"/blog/flutter-performance","description":"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。","date":"2020-03-10","redirects":null,"datetime":"2020-03-10 19:32:51","categories":["code"],"series":null,"tags":["整理","性能优化","flutter","调试"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","性能优化","flutter","调试"],"theme":null,"slug":"flutter-performance","date":"2020-03-10 19:32:51"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"flutter-performance\",\n  \"title\": \"💊 flutter 性能优化\",\n  \"date\": \"2020-03-10 19:32:51\",\n  \"author\": \"Ubug\",\n  \"description\": \"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"整理\", \"性能优化\", \"flutter\", \"调试\"],\n  \"banner\": \"../flutter-hero-with-image-fit/banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst WithFigcaption = makeShortcode(\"WithFigcaption\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u8BA9\\u4F60\\u77E5\\u9053 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"flutter\"), \" \\u5F00\\u53D1\\u4E2D\\u9047\\u5230\\u7684\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u548C\\u4E00\\u4E9B\\u5F88\\u5BB9\\u6613\\u7684\\u4F18\\u5316\\u65B9\\u6CD5\\u3002\")), mdx(\"hr\", null), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      justifyContent: 'center'\n    }\n  }, mdx(WithFigcaption, {\n    title: \"\\u4E1A\\u52A1\\u5E94\\u7528\\u6548\\u679C\",\n    mdxType: \"WithFigcaption\"\n  }, mdx(\"video\", {\n    controls: true,\n    autoPlay: true,\n    loop: true,\n    style: {\n      maxHeight: \"400px\",\n      maxWidth: \"100%\"\n    }\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/tongyu-demo.mp4\",\n    type: \"video/mp4\"\n  })))), mdx(\"p\", null, \"\\u65E0\\u8BBA\\u7528\\u4EC0\\u4E48\\u8BED\\u8A00\\u5F00\\u53D1\\u5E94\\u7528\\u7684\\u65F6\\u5019\\uFF0C\\u6027\\u80FD\\u548C\\u7A33\\u5B9A\\u6027\\u90FD\\u662F\\u4E00\\u4E2A\\u66F4\\u9AD8\\u8981\\u6C42\\u7684\\u65B9\\u9762\\uFF0C\\u7528 80% \\u7684\\u65F6\\u95F4\\u6765\\u62D4\\u9AD8 20% \\u7684\\u6548\\u679C\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u56E0\\u4E3A\\u4E1A\\u52A1\\u7684 APP \\u5E76\\u6CA1\\u6709\\u8FBE\\u5230\\u90A3\\u4E48\\u5927\\u7684\\u7528\\u6237\\u91CF\\uFF0C\\u6240\\u4EE5\\u4E0D\\u9700\\u8981\\u592A\\u6DF1\\u5165\\uFF0C\\u6BD5\\u7ADF\\u6536\\u76CA\\u80FD\\u6548\\u8FD8\\u4E0D\\u5230\\u6DF1\\u5165\\u7684\\u65F6\\u5019\\uFF0C\\u6240\\u4EE5\\u8FD9\\u91CC\\u4E5F\\u662F\\u4EC5\\u4EC5\\u4F18\\u5316\\u5E38\\u89C1\\u7684\\u4E1A\\u52A1\\u95EE\\u9898\\uFF0C\\u6BD4\\u5982\\u975E\\u5E38\\u5F71\\u54CD\\u6027\\u80FD\\u7684\\u5730\\u65B9\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001\\u4F7F\\u7528\\u6700\\u4F73\\u5B9E\\u8DF5\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://flutter.dev/docs/perf/rendering/best-practices\"\n  }, \"Performance best practices\"), \" \\u8FD9\\u662F\\u5B98\\u65B9\\u7684\\u4E00\\u7BC7\\u6587\\u6863\\uFF0C\\u91CC\\u9762\\u5305\\u542B\\u4E86\\u5F88\\u591A\\u7684\\u6027\\u80FD\\u4F18\\u5316\\u5B9E\\u8DF5\\uFF0C\\u6BD4\\u5982\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5C06\\u8017\\u65F6\\u7684\\u6E32\\u67D3\\u64CD\\u4F5C\\uFF0C\\u4ECE build \\u7EC6\\u5316\\u5230\\u5B50\\u7EC4\\u4EF6\\u4E2D\\u3002\\u6BD4\\u5982\\u4E00\\u4E2A build \\u6E32\\u67D3\\u51FD\\u6570\\u4E2D\\u5982\\u679C\\u5305\\u542B\\u4E86\\u4E00\\u4E2A\\u590D\\u6742\\u8BA1\\u7B97\\uFF0C\\u5176\\u4ED6\\u7684\\u4F9D\\u8D56\\u66F4\\u65B0\\uFF0C\\u5C31\\u4F1A\\u5BFC\\u81F4\\u8FD9\\u4E2A\\u590D\\u6742\\u8BA1\\u7B97\\u88AB\\u6267\\u884C\\uFF0C\\u5F92\\u589E\\u8017\\u65F6\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u907F\\u514D\\u4F7F\\u7528\\u6D89\\u53CA effects \\u7684\\u7EC4\\u4EF6\\u3002\\u6BD4\\u5982 Opacity\\u3001Text\\u3001ShaderMask\\u3001ColorFilter\\u3001Chip \\u7EC4\\u4EF6\\u3002effects \\u6548\\u679C\\u90FD\\u4F1A\\u4F7F\\u7528\\u5F88\\u590D\\u6742\\u7684\\u6E32\\u67D3\\uFF08\\u6BD4\\u5982 saveLayer\\uFF09\\u3002Opacity + \\u56FE\\u7247\\u53EF\\u4EE5\\u66FF\\u6362\\u4E3A FadeInImage\\uFF0CClip \\u88C1\\u526A\\u77E9\\u5F62\\u53EF\\u4EE5\\u4F7F\\u7528 borderRadius \\u4EE3\\u66FF\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u957F\\u5217\\u8868\\u5FC5\\u987B\\u4F7F\\u7528\\u5E26\\u6709 buider/sliver \\u7684\\u6EDA\\u52A8\\u7EC4\\u4EF6\\u3002\\u8FD9\\u6837\\u53EF\\u4EE5\\u4FDD\\u8BC1\\u5728 viewPort \\u5916\\u7684\\u5185\\u5BB9\\u53EF\\u4EE5\\u88AB\\u9500\\u6BC1\\uFF0C\\u7136\\u540E\\u8282\\u7701\\u5185\\u5B58\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u52A8\\u753B\\u4E2D\\u8C03\\u7528\\u8017\\u65F6\\u7EC4\\u4EF6\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4FDD\\u8BC1\\u6BCF\\u6B21 build \\u51FD\\u6570\\u90FD\\u5C0F\\u4E8E 16ms\\u3002\")), mdx(\"p\", null, \"\\u8FD9\\u4E9B\\u6700\\u4F73\\u5B9E\\u8DF5\\u8BF4\\u660E\\u8FD8\\u662F\\u5F88\\u6709\\u7528\\u7684\\uFF0C\\u6BD4\\u5982\\u6211\\u5728\\u6ED1\\u52A8\\u7684\\u65F6\\u5019\\u4F1A\\u6E10\\u9690\\u4E00\\u4E2A\\u7EC4\\u4EF6\\uFF0C\\u7528\\u5230\\u4E86 Opacity \\u7EC4\\u4EF6\\uFF0C\\u754C\\u9762\\u51FA\\u73B0\\u5361\\u987F\\uFF0C\\u5728\\u53BB\\u9664\\u6E10\\u9690\\u7684\\u6548\\u679C\\u540E\\u6027\\u80FD\\u660E\\u663E\\u6539\\u5584\\u3002\"), mdx(\"p\", null, \"\\u9664\\u6B64\\u4E4B\\u5916\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u53EF\\u4EE5\\u5C1D\\u8BD5\\u5C06\\u90E8\\u5206\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\u4FDD\\u6301\\u4E0D\\u53D8\\uFF0C\\u6BD4\\u5982\\u589E\\u52A0 const \\u4FEE\\u9970\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"build \\u4E2D\\u7684\\u8017\\u65F6\\u8BA1\\u7B97\\u7ED3\\u679C\\u53EF\\u4EE5\\u7F13\\u5B58\\u8D77\\u6765\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E0D\\u53EF\\u89C1\\u7684\\u63A7\\u4EF6\\uFF0C\\u5C3D\\u91CF\\u4E0D\\u8FDB\\u884C\\u4F9D\\u8D56\\u66F4\\u65B0\\u548C build \\u6E32\\u67D3\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5206\\u6E05\\u695A\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u7684\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u5728\\u6070\\u5F53\\u7684\\u751F\\u547D\\u94A9\\u5B50\\u4E2D\\u6267\\u884C\\u6070\\u5F53\\u7684\\u52A8\\u4F5C\\u3002\")), mdx(\"p\", null, \"\\u53C2\\u8003\\u6587\\u6863\\u4F18\\u5316\\u81EA\\u5DF1\\u7684\\u5E94\\u7528\\uFF0C\\u80FD\\u591F\\u89E3\\u51B3\\u5F88\\u591A\\u7684\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u5982\\u679C\\u4F9D\\u7136\\u51FA\\u73B0\\u95EE\\u9898\\u53EF\\u4EE5\\u5411\\u4E0B\\u5206\\u6790\\u6027\\u80FD\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u5DE5\\u6B32\\u5584\\u5176\\u4E8B\\u5FC5\\u5148\\u5229\\u5176\\u5668\"), mdx(\"p\", null, \"\\u6D41\\u7545\\u5EA6\\u662F\\u773C\\u775B\\u770B\\u5230\\u7684\\u89C6\\u89C9\\uFF0C\\u4E0D\\u662F\\u4E00\\u4E2A\\u80FD\\u660E\\u786E\\u62A5\\u9519\\u884C\\u6570\\u7684 bug\\uFF0C\\u6240\\u4EE5\\u9700\\u8981\\u4E00\\u4E2A\\u6307\\u6807\\u6765\\u770B\\u5230\\u5E95\\u54EA\\u91CC\\u5BFC\\u81F4\\u7684\\u6E32\\u67D3\\u95EE\\u9898\\u3002Dart DevTool \\u63D0\\u4F9B\\u8BF8\\u5982\\u6027\\u80FD\\u5206\\u6790\\u3001\\u5185\\u5B58\\u5360\\u7528\\u4EE5\\u53CA\\u663E\\u793A\\u8FD0\\u884C\\u706B\\u7130\\u56FE\\u7B49\\u529F\\u80FD\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5728 Android Studio \\u4E2D\\u4F7F\\u7528 Run > Flutter Run main.dart in Profile Mode \\u9009\\u9879\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"384px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a9ea028fd3e53c50779d7608f1b5230c/52870/profile.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"101.54440154440154%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAADOElEQVQ4y4VU6VIaQRDe5zAWsPfu7L0Le4AiEVBBUzkVYmLyAjmtsiSa5JHyil+6B5ZCYlV+fNXTszPf9NfHKsezBc6v/2Dv5CN6g1OU/WfYH77AwfgVDifnqA6eYXw6Q6c3QVKMkZZHyKoj8k+kZT+tlqj6UyhZ9wDdszk6nRKB7yAMPLSzGK5jwTR0GLoGx7agqS20mg2orYa0y3UTnnDpngffE9A1lQlT+D0X+909JGmKdrsjEccJNN2QUFUdOlnDsNYwTbYmBZKjqroSnudDyauSpGRIkxRhGCKKIiRJgiAIIYRHEPIgr5lgSby0qqpJYtt21laJkhhhm0jiFMZq07JseYnXDNcVcBxX7tVkfIZVRBHdDyMZgOe6UKzIQXSYSsnC86Bp+oOLDN5jbEbHhHmeo9fbQ1GUKMsSDqlR8l6JkDaqoqB8dFZS9H9INlE/VEe/hAuNcqscjrvojSrklNxOzgVpUw6X+eRcWpb1gLQm4zU/2GqpK2hUdarywbBAMa5Q5qWUkFKlOVLGY4XYJObIlmdzCX5cSdsJev0+9V4mI6rJOFKu+LbcTcK6sgwuWouqrvDHwA9kpXyyLJerVx/cjmw74s3CmaYBxSVZKUXDUcXxsgU4Mvb5gc1Lj2Et3xEIooCKkmeY0GSklL+EIuMc1rms+/F/kPK5SK5NbZNGSKkpeexialKWzGQcLSedSWv52+Ac8ndW4vk+zTvnkDZ9ahEm4xHjjwzOI/t1L9Z2Uyo/yGd5WrgjbMGTQi8EAeeNCPxQrn1CSL5PvkcXhPCJPCACT46nadrQqYltzlsYI6Kx5e8W+Yqp6xCWQXNIs2uqcC2doEnfMlrwyQqb9ggO7bcaOxKW3lydM+ALE47RpMipscNyhOG7BY7n9xhe3GE8v8Nwdo/RjP0f0h5ekE/r8Yy+nS8It3h6zvu/yP6U68HFb3RGV1C8vI/B1VeczhcYvbnG9O0thq+vcTy7wfTyFuOLGwxefsfZ+ztMyJ9cLvD8wz39lL+gmHxCOf2MYkr29BuywZxy6NgIswAF/aXjUCBLQmQxFUdYa5mm1pQpEA7L5/TQH7y5K6WrjScr7KDZ2MVf3U9t8WNqfbgAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"打开profile模式\",\n    \"title\": \"打开profile模式\",\n    \"src\": \"/static/a9ea028fd3e53c50779d7608f1b5230c/52870/profile.png\",\n    \"srcSet\": [\"/static/a9ea028fd3e53c50779d7608f1b5230c/2c191/profile.png 259w\", \"/static/a9ea028fd3e53c50779d7608f1b5230c/52870/profile.png 384w\"],\n    \"sizes\": \"(max-width: 384px) 100vw, 384px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u6253\\u5F00profile\\u6A21\\u5F0F\"), \"\\n  \")), mdx(\"p\", null, \"\\u80FD\\u770B\\u5230\\u6B64\\u65F6\\u7684 performance\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"521px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/998759b232c4bf2dc0f389042178c202/a833d/performance.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"44.78764478764479%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAAB1klEQVQoz2VRu24TURDdzwFkeb3v3bt3H157gxUnSkKUh5HyMmmCFJKCQExlCkiFCFKKRAIpEnQQ0lAgGhrSUVDA9xzOrFaWEcXRvXPuzJm5Z4wsbyNNM+R5jna7QBLHsNISul0i1glSvvtBCM/z/4Pv+3AcF0XRYZ1GI4xgqDyDYpAkCbIsg9YalmVVaLVaE1QcT7t+m4Zt2zCbTQRKwQiCADGnihlEhJy+68JhUhSGCGu4nMZjruU4E5FpCCc1hlya0pnBwzStcMs00SRvsvgemxUU0p6HfhShR3GpMWU6maw+G5xQyYRS4FJQES/LEu/n5/FiZgbPOh3cbjSwzffLuTm87vXwivzzbhfbtEdRxKNYn5Ofzc5WeTZ/ZowGAzwZ7uDx8jLO19bwnfHPlRX82dzEg+EQjyj2m/y3rS1cra7iI7kPGxt4urCAHYpLzS/i3fo67nBBxpgJFycnuByPcXVwgC9SvLSEHxR+c3qKi9EIN4uL+Lq7i2uKftrbw/X+Pt4eHeHs+BifDw9xw0bn9wcI7/ZhFNxstyhQEjk9SOhVVkM80fRN7im/ltRI6aPwWvLpb05O8bsqCmFMNsUFtGqzBdVS6Ktgcp/i/kG1WBMRm/wFHshHXcBoRSEAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"渲染帧率\",\n    \"title\": \"渲染帧率\",\n    \"src\": \"/static/998759b232c4bf2dc0f389042178c202/a833d/performance.png\",\n    \"srcSet\": [\"/static/998759b232c4bf2dc0f389042178c202/2c191/performance.png 259w\", \"/static/998759b232c4bf2dc0f389042178c202/86b01/performance.png 518w\", \"/static/998759b232c4bf2dc0f389042178c202/a833d/performance.png 521w\"],\n    \"sizes\": \"(max-width: 521px) 100vw, 521px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u6E32\\u67D3\\u5E27\\u7387\"), \"\\n  \")), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5728 Run \\u7A97\\u53E3\\u4E2D\\u6253\\u5F00 devTools \\u5DE5\\u5177\\u3002\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"180px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/351befd62f45a053458e17501687956b/3ac4a/open-devtool.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"187.77777777777774%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAmCAYAAADEO7urAAAACXBIWXMAAAsSAAALEgHS3X78AAAGAUlEQVRIx31W2W7jRhDkZ2R3E9iQdVInJVESKVInKVEnZa1teRcbbIAgSALkPV+Qr8jHdqp6SNleJHkYDDnk9HRXVXePVbwrSvHuTm5vbuRw/yirXSrVSkWcjiPtdhujI61WW0e93tBRs+tiY9RqZubgerlcEas1CKUzWUuj64u33EsvTGQYRjKarjDWMvIDcd2+dLtd6XQ60u/3dfDddV1xnK70er3sfSBW7/ijOJ/+kMXmLJv7z5KcnmUcp5JefpL4+CSDkS9RtJTL5SKHw0Hm87mkp5Mcj0fZbbeSJIk+D4dDHOSK1QnX0pyfxJttZLJKJYgOMpwlEsZHGWHuD0YyGLgShKH4vo/ngb5zphHP83SdXquHNze38sOHD/Ldu/fy7v33GB+kAFydbk9awI84MhzHMZj6QSjeOMQBUxnAYKvV0vUOMCckVhML4SSUkB54I31u1G3xRiMNjxvG47FMpzM1PMPa5c+/5fzbXzIaumqMh9EYZ6sAhpvNpi40mmSxLpVyWT8SbK6/EODgwIkcv/wuh8+/IuTBG4PqYalUktvbW7mBbO5gvFAo6FyBdP5tVGs1qdcqUi4W8F6FVMo6alyHM1YXWDUaDR2tVlO95bBtWw3UalWpVitvNhEmzhzcx391Hfssukshu5THciEThnRMZQGsFlEs0WIuq9VatptEWeUm3/eUhPP5rLLZ7g9yPOwlANZqkCe0gAUl0NHsaCuDxIvy8P2xTMIA2dNRjyh0zjxgBPKIL2UzwGw5AJwGm03Qn0mAempiQwlh1vGNYTOt8pDJfAMzydL0JHFwrMWQucCQB95YkvVapvBqjxBWcSw7hJ6sV7I/HOXhfFIB8+AwCDTkh4dH2e12sj+eJE2PkNZErGAy1VPpJWm34QUJIFY8TIEnUa/AJ0x1aFWhgrfcQ/b5v/X85avUqlVxen0I1aRTFEWKRweJP3D7ihFx44HVak29Iraz2UxFH4QTPE+lD91aX3/+ReXRHwwlhiEfxMznC1ksFrJDMYiWS9lsd3KfHpQ0GrxcnkCGJ5vNRlaAKV4nUEKMbAvEiiAJhpEDzg0qYHhdKhY1/FKpCMEbsTNMktFo1K/aNOKuaE20+NHo0IP2ZprTB5Sj2XQqk9lC5ghlCS/XcaRVhtgSFhbeE8pYDPISRLAHDGPo06LeeEobrAVgr9s1OUxG54ulQjCB8SUE3lPPmprDNDweB7rH83zV42g0NLLJU4hM8kdlEaEVETJDZ7G4y57zFMv1yGeTti2dLQ+ecMPQH6vmpvCGqUcdbqDHZLWSHebzfaop91qHj49Gh4f0JCfqEKXPIu0MmdaJJ/VFTygRhs6TudlxTNoR+FyHpuw52brRp4ZMYVJzbr8nfWhuCn0pXvCGKZXXuzw8vvOZBGo+A0MWBv5rWIZH7nAka4THD3G8UnHvNfRIQ/7IkD0TchCMleU0TVWLZHm73ZiQjfuZDnE6jef6ou7KFVMLSRDfc1Js2+iPusyLrJJCg0w9djeeQBnsdnsFng2JZYtEUaMsUUY2RocsIswoZsoG9dKjbNQgvGGX40YXm4YIn/jEyKIJ5sUyggLirA42VXMMnU2MeIcoMEw7quAa8uvBn3lI3ltM6hWuIedl387+t7O0bdQ15O61Hq6R4PQyha5i3BbWm62mHIvD6WiKQ05KXg+3uD2wHlKHhOfaAljzWKaaaKU8mRpkaExFrg9RrvJs6Kleje6IKyVF+XHP1SBBpo4oI4qdvaVas7P0arxAAoOdthH5EAfSCLXL/OYeEzJ1iGrD1CO4SbJByLHqkDCwBXxkC/BeUo/F5P7+rCGz6+33O20fb0jRQmGb1Gtk/TknIW8T+X+ve7ESlHXOq8F8MTeev78eb9a/ec6/WWTL3ELt/zTy7fi/g61eL+ut7Ml64WlnV+G2EkI9ak3M2oLp4SZF+c1Uo87L7Ws+m2sZP398ALB7zYgdZjYnskZxPz49afE4AHjer58uz9BdqnchHkByuBZBs1ptzO3TfTPn+qIXPbRYekxdVrPa2c4uTHoJRZFmDaCH/wDtvcykCgNDkgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"打开devTools工具\",\n    \"title\": \"打开devTools工具\",\n    \"src\": \"/static/351befd62f45a053458e17501687956b/3ac4a/open-devtool.png\",\n    \"srcSet\": [\"/static/351befd62f45a053458e17501687956b/3ac4a/open-devtool.png 180w\"],\n    \"sizes\": \"(max-width: 180px) 100vw, 180px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u6253\\u5F00devTools\\u5DE5\\u5177\"), \"\\n  \")), mdx(\"p\", null, \"\\u5728\\u5176\\u4E2D\\u7684 performance \\u529F\\u80FD\\u4E2D\\uFF0C\\u5F55\\u5236\\u505C\\u6B62\\u4E4B\\u540E\\uFF0C\\u53EF\\u4EE5\\u770B\\u5230\\u7ED8\\u5236\\u7684\\u51FD\\u6570\\u8C03\\u7528\\u65F6\\u95F4\\u5206\\u5E03\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/4745fb73b578bdd05b260d1896f78b0b/4d440/devtool.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"66.02316602316603%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAACvklEQVQ4y3WSXW8TRxSG/Zv4DQVqLFootCoIcQFF5aICVUJIVUhCEpCqCEEuEIILxCUXVSVApSURQbHzYZMQQhInTRFgWbHj2LG9jr07O7s766dnN6FKRXvx7HvO7Jx3z5ydxJGBHF8N5UhdneLAlQz7hc960hzszcR5pMm+SSEjeyb5cmiaQ/2T8bvP+yIm49rDA1OkZD3x8M8MD1cyvC+1WC3UKFTalBsupboba8RGQ1FpRuqyaek4LtdlTeL1ms2HskVho0Wx2iHRcOrU2lWUY2O3t/FcJ4ZuAMYj8DXdbojWLmFoJPfwPJeuxNpVhCbA97TEUkNIQnaTLSuGF9sMztUZWlL0L9gMLjr0LypuvGlxN29xb83hzrLFnTXF7VWb26IjKzYjy21+ft1kVU4k7mIorqMll9PpBqfHK5zJOpyd1ZzJuXw353NqokHyaZlzWZtjf5QYLWtsP6SqDDVX1PH5q+XzoWPkVFGHGF5u+Xw/bZF8VuPQhEMqrUiJJtMuJ8XwxGiJgTcdBl9WaWsZRdfsEO4iRl5g4pHEhnNieDFr8dP4e3rSRa4tOVzPa4bXDJezdY4+fsf1+Qb3V5pxsS/FxuwQxBr+kyeiL72Vlntmm5wfK/BDepOLMw1+fKXozRsuTNfZ90uR4WWb+aqSwXf/ZRgRhnsMo79lacNI3uaLp+t8PaViUqNbfJtu0ffK4tRYiV8LSmYVfNLhJ4bRwxceFTXJJ0UOPirwzfMa5ycqXMhtc3NVcWlmi6lNL/4RUr17zP8zlKQrV2d8Q3P093WOv2hyLudwbKzKLen6WcVwaXabhboXz+pjcaR744+acF0Xu9NhecNiOFfi5lKLB28dHuQbTJQdim2P34oO622NCXw8X/A8fFF/Nw6CII4jjQ0jwmDPdYiQ+xnNqxvu5JEa899orVFKxaZ/A8YKmdYx2wVuAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"性能分析图\",\n    \"title\": \"性能分析图\",\n    \"src\": \"/static/4745fb73b578bdd05b260d1896f78b0b/0dc48/devtool.png\",\n    \"srcSet\": [\"/static/4745fb73b578bdd05b260d1896f78b0b/2c191/devtool.png 259w\", \"/static/4745fb73b578bdd05b260d1896f78b0b/86b01/devtool.png 518w\", \"/static/4745fb73b578bdd05b260d1896f78b0b/0dc48/devtool.png 1035w\", \"/static/4745fb73b578bdd05b260d1896f78b0b/4d440/devtool.png 1200w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u6027\\u80FD\\u5206\\u6790\\u56FE\"), \"\\n  \")), mdx(\"p\", null, \"\\u5176\\u4E2D\\u56FE\\u793A\\u5C31\\u662F CPU \\u7684\\u65F6\\u95F4\\u5206\\u5E03\\u706B\\u7130\\u56FE\\uFF0C\\u5F88\\u65B9\\u4FBF\\u7684\\u770B\\u5230\\u6BCF\\u4E00\\u4E2A\\u51FD\\u6570\\u7684\\u8C03\\u7528\\u65F6\\u95F4\\uFF0C\\u7EC6\\u5316\\u5230\\u5177\\u4F53\\u7684\\u51FD\\u6570\\u3002\\u4E00\\u822C\\u5982\\u679C\\u51FD\\u6570\\u7684\\u6267\\u884C\\u6027\\u80FD\\u6709\\u95EE\\u9898\\uFF0C\\u5728\\u8FD9\\u91CC\\u5C31\\u80FD\\u770B\\u5230\\u662F\\u54EA\\u4E00\\u4E2A\\u51FD\\u6570\\u7684\\u8017\\u65F6\\u51FA\\u73B0\\u4E86\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u5DE5\\u5177\\u4F7F\\u7528\\u4E4B\\u540E\\u5C31\\u80FD\\u89E3\\u51B3\\u4E00\\u4E9B\\u6BD4\\u4EF7\\u5BB9\\u6613\\u5FFD\\u7565\\u7684\\u6027\\u80FD\\u95EE\\u9898\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u5185\\u5B58\\u95EE\\u9898\\u4F18\\u5316\"), mdx(\"p\", null, \"APP \\u7F16\\u8BD1\\u4E4B\\u540E\\u5728\\u624B\\u673A\\u4E0A\\u8FD0\\u884C\\u7684\\u65F6\\u5019\\u5185\\u5B58\\u5360\\u7528\\u975E\\u5E38\\u9AD8\\uFF0C\\u5C24\\u5176\\u5728\\u4F4E\\u7AEF\\u624B\\u673A\\u4E0A\\u975E\\u5E38\\u5361\\u987F\\uFF0C\\u5728\\u5206\\u6790\\u4E0B\\u4E4B\\u540E\\u53D1\\u73B0\\u4E86\\u5185\\u5B58\\u4E0A\\u5F88\\u4E25\\u91CD\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"h3\", null, \"1. \\u5229\\u7528 android \\u4E0B\\u7684 profile \\u529F\\u80FD\\u67E5\\u770B\\u5185\\u5B58\\u6C34\\u5E73\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3041fab2cecff550d1eb95f7fc88befd/68c10/flutter-performance-1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"64.09266409266408%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACgElEQVQ4y31RbU/TUBjtvxHr2q69azuYRJZFjbKoUYlg5AuG4Fg3XsZbFMGt402YLwkqGgggYx3b5GX4wYRojNEYNoZEP2ii/+V42yLZ4vTDybnn5nnOPc9zGZeswKW4IYoiJEn6i/+FirqyWkaSyKGh87+N1R6xtEumcFFt9zOEivKE5cXV0opOp52IEAi8AO85H06d8cFRw0Ot9diGRHZbhX9MTBDaUC2hy11LExErEVvD4oJPRWS6D62PY+h6HgOjqG64605ClmUoinIEU9d5PBWmAs+jsakR9V4v1Srks35ca7uOt5tD+JQfwOf1XjuhrNJXJbOJVKRRVdXWNK3H1wD2GAdNa8HgQhyhhQlMbyWwlB9DKaVhLxnEXipkGsr2yKI5cuXvKXQ0Qh8hghMdQ7dwYzqKxdQIivl+FDb6cLAWwoERQjHddQTGZY5K90KIZO3NZMkpWHsitfVo8DeiebALRmoI798Mo7AWttIUVzXspmwUysCwLA8HR3C85gRYlgPvEODgCc43X8XdRR3xudvY2b6DXSOM/ZWAbUBTFVLVwYT1AIK6hsBoO24Ot6P1XgSdj0awnIvia44myPaglOzEvhG0jEwuGtqRwR49lw61ec/8zHfjRz6CX1shfN/qxsF2BN8om4U7L3vojjpRSmt4vdxvGW4uDdCUIcvkSzqID8luvFvpsfTHVbpDbWYG4cQD9CYm0XE/gfapBNomH8Iff4aG6DxapmbRPDkLb2weF8fpHeVL409xZeIJmij8Y3M4rb/AZXpnnhlOfwUhvgFOz8E8c/F1C87xdUhjWThGDYo0xKgBPko5lqa8Bs5CBkIsA1HPgI9lIehZ/AZPaygtFDp34gAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"JAVA下的内存增长\",\n    \"title\": \"JAVA下的内存增长\",\n    \"src\": \"/static/3041fab2cecff550d1eb95f7fc88befd/0dc48/flutter-performance-1.png\",\n    \"srcSet\": [\"/static/3041fab2cecff550d1eb95f7fc88befd/2c191/flutter-performance-1.png 259w\", \"/static/3041fab2cecff550d1eb95f7fc88befd/86b01/flutter-performance-1.png 518w\", \"/static/3041fab2cecff550d1eb95f7fc88befd/0dc48/flutter-performance-1.png 1035w\", \"/static/3041fab2cecff550d1eb95f7fc88befd/68c10/flutter-performance-1.png 1074w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"JAVA\\u4E0B\\u7684\\u5185\\u5B58\\u589E\\u957F\"), \"\\n  \")), mdx(\"p\", null, \"\\u53D1\\u73B0\\u5185\\u5B58\\u5360\\u7528\\u968F\\u7740\\u8DEF\\u7531\\u6DFB\\u52A0\\u5185\\u5B58\\u589E\\u957F\\u975E\\u5E38\\u5FEB\\uFF0C\\u51E0\\u4E2A\\u9875\\u9762\\u4E4B\\u540E\\u5C31\\u5C06\\u8FD1 1G \\u7684\\u5185\\u5B58\\u6C34\\u5E73\\u4E86\\uFF0C\\u4F46\\u662F\\u9875\\u9762\\u4E5F\\u5C31\\u51E0\\u4E2A\\u56FE\\u7247\\uFF0C\\u800C\\u4E14\\u6ED1\\u52A8\\u7684\\u65F6\\u5019\\u5185\\u5B58\\u4E5F\\u5FEB\\u901F\\u4E0A\\u5347\\uFF0C\\u5373\\u4F7F\\u4E1A\\u52A1\\u4E2D\\u5DF2\\u7ECF\\u5BF9\\u4E8E\\u6EDA\\u52A8\\u4F18\\u5316\\u4E86\\u8D8A\\u754C\\u533A\\u57DF\\u7EC4\\u4EF6\\u7684\\u91CA\\u653E\\uFF0C\\u5F88\\u660E\\u663E\\u54EA\\u91CC\\u51FA\\u4E86\\u95EE\\u9898\\u3002\"), mdx(\"h3\", null, \"2. \\u5229\\u7528 profile \\u4E0B\\u7684 Dart DevTools \\u67E5\\u770B\\u5185\\u5B58\\u6C34\\u5E73\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"flutter run --profile\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"628px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1b7f0479441489b026d38f456aad3780/b5c2d/flutter-performance-2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"86.10038610038609%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAC/klEQVQ4y6VUyW4TQRBtwYUbp9y4I/EHnIDvgG/hikAExCokDohFIOAQlhBFcOJAIiWQ2PIWO2OP9xl7xrN79plHddux4gAnWirNVHX161dd/ZrhHyMMQ1iWhTzPhc+/R/8nx/E4404cx8LCKBJAfKRpCs/zkJ9YxOM8NyILggBJkizNs4wSVFXBYNCHbTsLVtw0TYPv+0sLXNdFr9uFPpnAMk0CDZcqEICO4yyYHY0syzAejaAoCrFIF3HPc0V+lqV/KZkA+Y6mMSEmwTyYUkKGnAA5w/F4TGx0GIYh2HMwY6IhW6AlS+fMxOI5uqt3oE2Pds0WZczsmM8rCBSohoPoBEsmOCUh8vVL2Lh/FQ+fvgd6b+EQBc30EPizHSwvQxDNykz6r+B8W8H1258hrz+gyBQcTzDkCX7hEewbDMUnV1BdPYfgzXnEXgh3YiJOYgESu1OkEbFMPfhfV6B/PIXtF9fgvmNI1LU5y3TOsHgH5i0G6/EZ2Kv0fXkB+VSBo1E3DQtJ7CPzhsjjiMyEt3kW7ieGcPM03DUC7L+eAyZgg8EA/cNd9J5fhHmXwbjHEFWfzUqLXOp+hCyNiRmVlc1OLJJuCkDnA4O/dVnMHZ0768gSut2e6Ggsf0GilWaHnuVLl5pcsnwRT4xdxOoGgUXC52CLpvzPmDUjm4NSU/r9PgK61DyQZgmVl0DXdYyIMWfNFdGlnNrBAfk6NJrjd1MdqTDNyR+Xmzm2DUU3YU0DqLaPgWZAarbwY7+MYuUAhUoN33eLKFdr2C9VsVUoo1yXsF2s0reJju7A80NBlauLcZXw3X3SZExdlOU2qcJEuVyCJElCtzs7O6R3FQe1Gn7u7QnFtNsy6o1DFNojmN5MZfyxYPy14GXzl8YlWQ2HCmxaUK/X0Wy1hNS6nY4AHNKNqFQqmNAxHDYaaMkdtFQDY4tuQ5wIfbOYgKRmUzDkr0e73aFXx0apVCYGDdrEhUzAw+EQvV4Pv4ghB6xVK2hILRQ7YxRkBU3FwGBi4zfy1vknvYa1/QAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Allocation-Profile-in-Dart-DevTools\",\n    \"title\": \"Allocation-Profile-in-Dart-DevTools\",\n    \"src\": \"/static/1b7f0479441489b026d38f456aad3780/b5c2d/flutter-performance-2.png\",\n    \"srcSet\": [\"/static/1b7f0479441489b026d38f456aad3780/2c191/flutter-performance-2.png 259w\", \"/static/1b7f0479441489b026d38f456aad3780/86b01/flutter-performance-2.png 518w\", \"/static/1b7f0479441489b026d38f456aad3780/b5c2d/flutter-performance-2.png 628w\"],\n    \"sizes\": \"(max-width: 628px) 100vw, 628px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"Allocation-Profile-in-Dart-DevTools\"), \"\\n  \")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u56FE\\u80FD\\u770B\\u5230\\u786E\\u5B9E\\u662F\\u56FE\\u7247\\u7684\\u5360\\u7528\\u5360\\u636E\\u4E86\\u5F88\\u5927\\u7684\\u4E00\\u90E8\\u5206\\u5185\\u5B58\\u6CA1\\u6709\\u91CA\\u653E\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"750px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/4685d1551e77a4f98dae65c8e7fa8d78/4746c/flutter-performance-3.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"60.231660231660236%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7DAAAOwwHHb6hkAAABhElEQVQoz62S20rDQBCG8wqit6JiETy8q3pTi+LriLZFKHgnVqVabU672Zwbk9+ZSQxVlIq48PPPzk6+nWFjbZ/0sXs6xHq3j7XjSxycX6PT64Pznd5AznbPhtgncbzZvcLK4QW26Hz16AIbtN+h+r3TgeytsU5x58W4mXoYTWyMHme4VyluKXfnJ63GlGM9BBnGOmv9nvzR5LLnOgu83uYwyoNnz/DyNIFybDgvz7BFU7izV2RRiCJLqLaQ+qrIxXlfzikuC0FZVQXkcwKGoSgMI4RRJLE2BsbUOSP5uD0LAiNxRLmA6uI4QVkJsMJ/LWZZH8FfPv6qZuQ6SNMUeZ4jyzKJF53FI0U0Ykzi/CJ0cbVA13WhtRZ3HAe+74t7nkfuQilF0Pj3QAZwB4rcdWsgw30CaoIp5dcPRZdyt0uBIRVzBxE5d8NA3/fEGWLoJasGUpblcmAgN8dIkrgZWcm4bjO+Tf9moINPsO9WC9QNkMf+gDi2XUNpdJtiEZ1x3U8dvgPNBIlerCOTHgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"heap-snapshot-in-Dart-DevTools\",\n    \"title\": \"heap-snapshot-in-Dart-DevTools\",\n    \"src\": \"/static/4685d1551e77a4f98dae65c8e7fa8d78/4746c/flutter-performance-3.png\",\n    \"srcSet\": [\"/static/4685d1551e77a4f98dae65c8e7fa8d78/2c191/flutter-performance-3.png 259w\", \"/static/4685d1551e77a4f98dae65c8e7fa8d78/86b01/flutter-performance-3.png 518w\", \"/static/4685d1551e77a4f98dae65c8e7fa8d78/4746c/flutter-performance-3.png 750w\"],\n    \"sizes\": \"(max-width: 750px) 100vw, 750px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"heap-snapshot-in-Dart-DevTools\"), \"\\n  \")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u56FE\\u5927\\u6982\\u80FD\\u770B\\u5230\\u51FA\\u4E86\\u4EC0\\u4E48\\u95EE\\u9898\\uFF0C\\u56FE\\u7247\\u7684\\u5C55\\u793A\\u5229\\u7528\\u4E86\\u7B2C\\u4E09\\u65B9\\u63D2\\u4EF6\\u5B9E\\u73B0\\u7F13\\u5B58\\uFF0C\\u5E76\\u4E14\\u51FA\\u73B0\\u7684\\u65F6\\u5019\\u6709\\u8FDB\\u5EA6\\u548C\\u9010\\u6E10\\u663E\\u793A\\u7684\\u6548\\u679C\\uFF0C\\u6240\\u4EE5 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AdvancedNetworkImage\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Image\"), \" \\u7684\\u5360\\u7528\\u975E\\u5E38\\u9AD8\\u3002\\u4F46\\u662F\\u4E5F\\u4E0D\\u81F3\\u4E8E\\u8FD9\\u4E48\\u591A\\uFF0C\\u540C\\u65F6 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_TransitionToImageState\"), \" \\u4E5F\\u4E0D\\u5E94\\u8BE5\\u5360\\u7528\\u8FD9\\u4E48\\u591A\\uFF0C\\u731C\\u6D4B\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TransitionToImage\"), \" \\u7EC4\\u4EF6\\u53EF\\u80FD\\u591A\\u6B21\\u7F13\\u5B58\\u4E86\\u56FE\\u7247\\u6570\\u636E\\u751A\\u81F3\\u53EF\\u80FD\\u6709\\u5185\\u5B58\\u6CC4\\u9732\\uFF0C\\u5BFC\\u81F4\\u5185\\u5B58\\u5360\\u7528\\u88AB\\u653E\\u5927\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u6709\\u4E86\\u731C\\u60F3\\u53BB\\u68C0\\u9A8C\\u4E00\\u4E0B\\uFF0C\\u5C06\\u8FD9\\u4E2A\\u7EC4\\u4EF6\\u66FF\\u6362\\u6210\\u7EAF\\u56FE\\u7247\\u7EC4\\u4EF6 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Image\"), \" \\u4F5C\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ImageProvider\"), \"\\uFF0C\\u7136\\u540E\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AdvancedNetworkImage\"), \" \\u4F5C\\u4E3A\\u6570\\u636E\\u6E90\\uFF0C\\u518D\\u6D4B\\u8BD5\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"411px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/0eff7ff54dc38edd433660f4299bb92f/abb2f/flutter-performance-4.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"122.39382239382239%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAAA7DAAAOwwHHb6hkAAADmUlEQVQ4y5VVTa/bRBT1b2HBBlixYFNUCXWFBOqCDUv+AStg8TaIB0hFLGGBxLoCCYoEVKIPQWkLEnp5Vd5H853YiRPbie04cWzHicc+3Dt2gl/yqsJIN56xZ8495965N0qWZVgul1itVuA5j6ueT7Niw3auCJFA6/dhO/be4TLo08bud2XzkhmmaXolQyEE1uv1VklMzziOpZVJbAEXwQKmadJBBtyXxAfH4zE0TYNFT8uyMBzqdMZCtiuZf+bzGYzRkDaOkSTJnteE2NkTWwKGUfRsyWEYwDRGGJNndzrdixM7kQpKIdmN82XJC5JsmRLQtm1MCZRZz+c+fN9HRDHTdZ3W80JBhlSC4FKISgxDOI4jZTGA4zpwXReeN5PgHEMG86YuzZdb5iLdZcmAz7gWV40k9hAsxV4c+amk5MXxBQJiGQSBzFiSpFiEAj4Zs0AmZDZFNEJy8gb0e9fwzpcT3PppjWiVxzXdSKaz6FIevFkuj2MSrzNMfMAh/EQU3kWM8MHLiL5ToP3wHF7/1MQL7wU4+Ca8lBgFVClCa8Nzp4iiIj5ZitRzISZjZOv88ibGt/DvKIh/JsAfn8fNz0xc/yjEqx/OURvm8lmtkqVUBWMLC85mAcieRBAioXdZspLv1t3Pc8C7Cvp3XsKbnzi4fhhIwPu1ZJskSsoawq/AsScwDJMyPCV5EdJIJxvSPHci7F/hf69geUSAhzfw1oGBax+HeO3Qx8D5N46K1J6Eshq4XpOEEkCSOWZZmuRz3sMleP42pl8p6N54BTffb+LFgyW+/m25lZvH8L8MzqDMTYrg0W2YH7yLL25ruHuRX+zNFpnlPDs5C+4227KS89Ka52lxuPTLzNJSKSr/70qzIyGdMfamUsqmMKtd4/7HdtW3su02BgnYU1Wo1JZUlU1FfzBA9bSKe0dHqD2pUzcf5O9pj9xL+3q9HkajkZS7O5SHpw3cf1xDvdnGab0l57+TPT6voddp4/iiiV8qNfnt5EkTf1QbeFCto97VoLsLGLNwy1gybHc6ePjoT+jDIfU8g9id4e/jCjHtU5e2cFqsW50utTYHJnXsNs27PRW1voW/GjoWUVwkkQCbjQYqJycwqIF6nocZ1XS71cKA/ri4lfW6XVQqx+gXa03t4fzsjIrAQGtIXXzi5ZW1Aey02xJwRBsYkBtEg5wwAPdAbvsMyHHmtUrxq1arMtZ1fYKqauJiQKwNR2b9H4UkFQeWqvynAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"修改之后的-Dart-DevTools\",\n    \"title\": \"修改之后的-Dart-DevTools\",\n    \"src\": \"/static/0eff7ff54dc38edd433660f4299bb92f/abb2f/flutter-performance-4.png\",\n    \"srcSet\": [\"/static/0eff7ff54dc38edd433660f4299bb92f/2c191/flutter-performance-4.png 259w\", \"/static/0eff7ff54dc38edd433660f4299bb92f/abb2f/flutter-performance-4.png 411w\"],\n    \"sizes\": \"(max-width: 411px) 100vw, 411px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u4FEE\\u6539\\u4E4B\\u540E\\u7684-Dart-DevTools\"), \"\\n  \")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"728px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5cdd34780f262f915ce08be984ebca8a/50223/flutter-performance-5.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"48.64864864864865%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABUklEQVQoz61RyU7DMBDNP3ChNxAXUEEc+qMIJECU5W9A3eAOB6SSJjRxnDh20yXLY8YlUkGl6oGRnmd59stkxjm9G2D/uovGRQethxcct/s4umH0cEi+df+M5m0fJ4Rmu4fG+RP2Ljs4uOpil+JlfcnvnD3CGUqDd6Hw5gu8+hK+WcBLZ/D1HB7Bpdj7jpn7nKwHc/zGKeZTKBkh8D24wyFEMMZ45MIffRBcW08igVlmUOYLlIs5qhVfx0SCzZlOSVClUOkSqdZIycdJgiRRlktTDc11At/R2iBRyuYcc22SZahYEP9oVVXB4aNOqhXit98GqDss8hxlWaIoCgsm2XMtJ27dB/4y22EYhjA8C5qLEAKaZsK1iJbBeRzHP35rk9kO+UFGQ50YgyAIrbCUkgQjKFoOi/NStuqQD37EgrxxFuQts6AkwYQ4IUKb1zqbBL8Anhvw0gZE3u8AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"修改之后的-Dart-DevTools\",\n    \"title\": \"修改之后的-Dart-DevTools\",\n    \"src\": \"/static/5cdd34780f262f915ce08be984ebca8a/50223/flutter-performance-5.png\",\n    \"srcSet\": [\"/static/5cdd34780f262f915ce08be984ebca8a/2c191/flutter-performance-5.png 259w\", \"/static/5cdd34780f262f915ce08be984ebca8a/86b01/flutter-performance-5.png 518w\", \"/static/5cdd34780f262f915ce08be984ebca8a/50223/flutter-performance-5.png 728w\"],\n    \"sizes\": \"(max-width: 728px) 100vw, 728px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u4FEE\\u6539\\u4E4B\\u540E\\u7684-Dart-DevTools\"), \"\\n  \")), mdx(\"p\", null, \"\\u7C7B\\u4F3C\\u7684\\u64CD\\u4F5C\\u4E4B\\u540E\\uFF0C\\u5185\\u5B58\\u6C34\\u5E73\\u770B\\u7B80\\u76F4\\u4E0D\\u662F\\u540C\\u4E00\\u4E2A App\\uFF0C\\u5185\\u5B58\\u4E0B\\u964D\\u7684\\u975E\\u5E38\\u660E\\u663E\\uFF0C\\u6D41\\u7545\\u5EA6\\u4E5F\\u6709\\u5F88\\u5927\\u7684\\u63D0\\u9AD8\\uFF0C\\u552F\\u4E00\\u7F3A\\u5931\\u7684\\u53EA\\u6709\\u8FDB\\u5EA6\\u8FD9\\u4E00\\u4E2A\\u529F\\u80FD\\uFF0C\\u4E1A\\u52A1\\u5C42\\u9762\\u4E5F\\u5B8C\\u5168\\u80FD\\u591F\\u63A5\\u53D7\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u4E1A\\u52A1\\u76F8\\u5173\"), mdx(\"p\", null, \"\\u4E1A\\u52A1\\u7684\\u5F62\\u5F0F\\u4E0E\\u6027\\u80FD\\u4E5F\\u5F88\\u6709\\u5173\\u7CFB\\uFF0C\\u5F88\\u591A\\u4E1A\\u52A1\\u5929\\u751F\\u5C31\\u5360\\u5185\\u5B58\\uFF0C\\u6BD4\\u5982\\u957F\\u56FE\\u7247\\u5217\\u8868\\u7B49\\u56FE\\u7247\\u7EC4\\u4EF6\\u3002\"), mdx(\"h3\", null, \"1. \\u56FE\\u7247\\u88C1\\u526A\"), mdx(\"p\", null, \"\\u4EFB\\u4F55\\u7684\\u56FE\\u7247\\u7EC4\\u4EF6\\uFF0C\\u90FD\\u53EF\\u4EE5\\u4F7F\\u7528\\u88C1\\u526A\\u8FC7\\u7684\\u56FE\\u7247\\u6765\\u51CF\\u5C11\\u5185\\u5B58\\u5360\\u7528\\uFF0C\\u8FD9\\u662F\\u4E00\\u4E2A\\u975E\\u5E38\\u7B80\\u5355\\u4F46\\u662F\\u975E\\u5E38\\u6709\\u6548\\u7684\\u9014\\u5F84\\uFF0C\\u800C\\u4E14\\u80FD\\u63D0\\u9AD8\\u52A0\\u8F7D\\u901F\\u5EA6\\u3001\\u964D\\u4F4E\\u670D\\u52A1\\u5668\\u5E26\\u5BBD\\u7B49\\u3002\"), mdx(\"p\", null, \"\\u5217\\u8868\\u4E2D\\u7684\\u5927\\u91CF\\u56FE\\u7247\\uFF0C\\u9700\\u8981\\u4F7F\\u7528\\u7B26\\u5408\\u5927\\u5C0F\\u7684\\u7F29\\u7565\\u56FE\\uFF0C\\u6CA1\\u6709\\u7F29\\u7565\\u56FE\\u53EF\\u4EE5\\u4F7F\\u7528 CDN \\u7684 url \\u88C1\\u526A\\u529F\\u80FD\\uFF0C\\u6216\\u8005 nginx \\u7684\\u56FE\\u7247\\u88C1\\u526A\\u6765\\u5B9E\\u73B0\\u81EA\\u52A8\\u88C1\\u526A\\uFF0C\\u5BF9\\u4E1A\\u52A1\\u7684\\u4FB5\\u5165\\u4E5F\\u5F88\\u5C0F\\u3002\\u540C\\u65F6\\u4FDD\\u8BC1\\u5404\\u5904\\u7684\\u88C1\\u526A\\u5927\\u5C0F\\u76F8\\u540C\\u4E5F\\u80FD\\u547D\\u4E2D\\u88C1\\u526A\\u7F13\\u5B58\\u3002\\u8FD9\\u6837\\u5BA2\\u6237\\u7AEF\\u5728\\u5C55\\u793A\\u7684\\u65F6\\u5019\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u8F83\\u4F4E\\u8D28\\u91CF\\u7684\\u56FE\\u7247\\u663E\\u8457\\u964D\\u4F4E\\u5185\\u5B58\\u7684\\u5360\\u7528\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u7684 APP \\u6709\\u5F88\\u591A\\u7684\\u6EDA\\u52A8\\u5217\\u8868\\uFF0C\\u6BCF\\u4E2A\\u5217\\u8868\\u51E0\\u4E4E\\u90FD\\u662F\\u56FE\\u7247\\u5217\\u8868\\uFF0C\\u88C1\\u526A\\u56FE\\u7247\\u8FD9\\u4E2A\\u505A\\u6CD5\\u5C06\\u5185\\u5B58\\u5360\\u7528\\u964D\\u4F4E\\u4E86 70%\\uFF0C\\u52A0\\u8F7D\\u901F\\u5EA6\\u4E5F\\u8089\\u773C\\u53EF\\u89C1\\u7684\\u66F4\\u597D\\u4E86\\uFF0C\\u6D41\\u7545\\u5EA6\\u4E0A\\u6BD4\\u4E4B\\u524D\\u597D\\u5F88\\u591A\\u3002\"), mdx(\"h3\", null, \"2. keep state\"), mdx(\"div\", {\n    \"style\": {},\n    \"'flex',\": \"\",\n    \"justifycontent:\": \"\",\n    \"'center'}}\": \"\"\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"figure\",\n    \"src\": \"/flutter-per-1-e44ca31a67fc40cef6f839a865cff0b8.svg\"\n  }), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u9875\\u9762\\u6570\\u636E\\u6682\\u5B58\"), \"\\n  \")), mdx(\"div\", {\n    \"style\": {},\n    \"'flex',\": \"\",\n    \"justifycontent:\": \"\",\n    \"'center'}}\": \"\"\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"figure\",\n    \"src\": \"/flutter-per-2-d5de3268ea00a3c909962dc7a9c12d02.svg\"\n  }), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u9875\\u9762\\u6570\\u636E\\u6682\\u5B58\\u548C\\u91CD\\u5EFA\"), \"\\n  \")), mdx(\"p\", null, \"\\u521A\\u5F00\\u59CB\\u7528 flutter \\u7684\\u65F6\\u5019\\u4F1A\\u51FA\\u73B0\\u6BD4\\u5982\\u5207\\u6362 tab \\u7684\\u65F6\\u5019\\uFF0C\\u6CA1\\u529E\\u6CD5\\u4FDD\\u7559\\u7EC4\\u4EF6\\u72B6\\u6001\\uFF0C\\u56E0\\u4E3A\\u7EC4\\u4EF6\\u4E00\\u65E6\\u9500\\u6BC1\\uFF0C\\u518D\\u91CD\\u5EFA\\u4E0D\\u4F1A\\u4F7F\\u7528\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\u3002\\u8FD9\\u5F88\\u5BB9\\u6613\\u7406\\u89E3\\uFF0C\\u6240\\u4EE5\\u4E00\\u756A\\u641C\\u7D22\\u4E4B\\u540E\\u53D1\\u73B0 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AutomaticKeepAliveClientMixin\"), \" \\u7684 keep alive \\u80FD\\u591F\\u5B9E\\u73B0\\uFF0C\\u6240\\u4EE5\\u5728\\u5F88\\u591A\\u7684\\u5E38\\u7528\\u7EC4\\u4EF6\\uFF0C\\u5C24\\u5176\\u662F\\u6EDA\\u52A8\\u7EC4\\u4EF6\\u4E0A\\u52A0\\u4E0A\\u4E86\\u8FD9\\u4E2A\\u5C5E\\u6027\\u3002\"), mdx(\"p\", null, \"\\u95EE\\u9898\\u5C31\\u662F\\u8FD9\\u4E2A\\u7EC4\\u4EF6\\uFF0C\\u5BFC\\u81F4\\u4E86\\u6EDA\\u52A8\\u7EC4\\u4EF6\\u6CA1\\u6709\\u56DE\\u6536\\u5176\\u4E2D\\u7684\\u56FE\\u7247\\u8D44\\u6E90\\u548C\\u5176\\u4E2D\\u7684\\u5217\\u8868\\u6570\\u636E\\uFF0C\\u5360\\u7528\\u4E86\\u5F88\\u591A\\u5185\\u5B58\\uFF0C\\u6240\\u4EE5\\u8FD9\\u4E2A keep alive \\u7684\\u65B9\\u6CD5\\u53EA\\u80FD\\u5728\\u5173\\u952E\\u7684\\u9875\\u9762\\u4F7F\\u7528\\u3002\\u800C\\u4E00\\u822C\\u7684\\u7EC4\\u4EF6\\u5462\\uFF1F\\u5C24\\u5176\\u662F\\u6EDA\\u52A8\\u7EC4\\u4EF6\\uFF0C\\u4E3A\\u4E86\\u8BA9\\u5185\\u5B58\\u4FDD\\u6301\\u4F4E\\u6C34\\u5E73\\uFF0C\\u5FC5\\u987B\\u8BA9\\u7EC4\\u4EF6\\u53CA\\u65F6\\u9500\\u6BC1\\uFF0C\\u4F46\\u662F\\u4E3A\\u4E86\\u8BA9\\u7EC4\\u4EF6\\u5207\\u6362\\u56DE\\u6765\\u7684\\u65F6\\u5019\\u4E0D\\u81F3\\u4E8E\\u4E22\\u4E86\\u6EDA\\u52A8\\u4F4D\\u7F6E\\uFF0C\\u8FD8\\u662F\\u9700\\u8981\\u4FDD\\u7559\\u8FD9\\u4E2A\\u72B6\\u6001\\u3002\"), mdx(\"p\", null, \"\\u89E3\\u51B3\\u65B9\\u6848\\u5C31\\u662F\\u5C01\\u88C5\\u6EDA\\u52A8\\u7EC4\\u4EF6\\u9875\\u9762\\uFF0C\\u5C06\\u5185\\u90E8\\u7684\\u5217\\u8868\\u6570\\u636E\\u3001\\u6EDA\\u52A8\\u4F4D\\u7F6E\\u3001\\u76F8\\u5173\\u9644\\u52A0\\u6570\\u636E\\u7B49\\u6682\\u5B58\\uFF0C\\u4EE5\\u9875\\u9762 Key \\u4E3A\\u952E\\u4FDD\\u5B58\\u503C\\uFF0C\\u6BCF\\u6B21\\u7EC4\\u4EF6\\u83B7\\u53D6\\u6570\\u636E\\u3001\\u66F4\\u6539\\u4F4D\\u7F6E\\u90FD\\u4FDD\\u5B58\\u4E0B\\u8FD9\\u4E9B\\u72B6\\u6001\\uFF0C\\u7136\\u540E\\u9500\\u6BC1\\u91CD\\u5EFA\\u7684\\u65F6\\u5019\\uFF0C\\u53BB\\u6570\\u636E\\u4E2D\\u5FC3\\u8BFB\\u53D6\\u8FD9\\u4E9B\\u6570\\u636E\\uFF0C\\u56E0\\u4E3A\\u662F\\u5185\\u5B58\\u4E2D\\u7684\\uFF0C\\u7EC4\\u4EF6\\u6839\\u636E\\u5185\\u5B58\\u6570\\u636E\\u91CD\\u65B0\\u521D\\u59CB\\u5316\\u5F88\\u5FEB\\uFF0C\\u611F\\u89C9\\u4E0D\\u5230\\u7EC4\\u4EF6\\u7684 loading\\uFF0C\\u6240\\u4EE5\\u4E5F\\u5C31\\u5B9E\\u73B0\\u4E86\\u4FDD\\u5B58\\u72B6\\u6001\\uFF0C\\u4F46\\u662F\\u4E0D\\u4FDD\\u5B58\\u7EC4\\u4EF6\\u7684\\u76EE\\u7684\\u3002\"), mdx(\"h3\", null, \"3. \\u56FE\\u7247\\u76F8\\u5173\\u52A0\\u8F7D\\u548C\\u7F13\\u5B58\\u4F18\\u5316\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7B2C\\u4E00\\u7248\\uFF1A\\u4F7F\\u7528\\u5185\\u5B58\\u7F13\\u5B58\\u548C\\u672C\\u5730\\u6587\\u4EF6\\u7F13\\u5B58\")), mdx(\"p\", null, \"\\u5C01\\u88C5\\u539F\\u751F\\u56FE\\u7247\\u7EC4\\u4EF6\\uFF0C\\u4F7F\\u7528 ImageProvider \\u548C ImageCache \\u6765\\u7F13\\u5B58\\u56FE\\u7247\\u5230\\u5185\\u5B58\\u548C\\u672C\\u5730\\u6587\\u4EF6\\u50A8\\u5B58\\u4E0A\\u3002\"), mdx(\"p\", null, \"\\u7F13\\u5B58\\u5230\\u5185\\u5B58\\u91CC\\u9762\\uFF0C\\u53EF\\u4EE5\\u5B9E\\u73B0\\u56FE\\u7247\\u7684\\u6700\\u5FEB\\u52A0\\u8F7D\\uFF0C\\u751A\\u81F3\\u4E0D\\u4F1A\\u51FA\\u73B0 loading \\u52A8\\u753B\\uFF0C\\u800C\\u4E14\\u4E0D\\u540C\\u5206\\u8FA8\\u7387\\u7684\\u56FE\\u7247\\u505A\\u52A8\\u753B\\u4E5F\\u662F\\u4E1D\\u6ED1\\u53D8\\u6362\\u7684\\uFF0C\\u4F53\\u9A8C\\u5F88\\u597D\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5185\\u5B58\\u4E2D\\u7F13\\u5B58\\u592A\\u5962\\u4F88\\u4E86\\uFF0C\\u5C24\\u5176\\u662F\\u5217\\u8868\\u4E2D\\u7684\\uFF0C\\u5927\\u91CF\\u56FE\\u7247\\u7684\\u4F7F\\u7528\\u4E00\\u5B9A\\u4F1A\\u5BFC\\u81F4\\u5185\\u5B58\\u7206\\u70B8\\u589E\\u957F\\uFF0C\\u6700\\u540E\\u5D29\\u6E83\\u3002\\u6240\\u4EE5\\u5185\\u5B58\\u7684\\u7F13\\u5B58\\u5728\\u5217\\u8868\\u4E2D\\u53BB\\u9664\\u4E86\\uFF0C\\u56FE\\u7247\\u7EC4\\u4EF6\\u88AB\\u9500\\u6BC1\\uFF0C\\u5185\\u5B58\\u4E2D\\u4E5F\\u4E0D\\u4FDD\\u7559\\u56FE\\u7247\\u4FE1\\u606F\\uFF0C\\u56FE\\u7247\\u52A0\\u8F7D\\u7684\\u65F6\\u5019\\u56DE\\u4ECE\\u672C\\u5730\\u6587\\u4EF6\\u7CFB\\u7EDF\\u4E2D\\u8BFB\\u53D6\\uFF0C\\u867D\\u7136\\u4F1A\\u5BFC\\u81F4\\u4E00\\u4E9B loading\\uFF0C\\u4F46\\u662F\\u597D\\u5728\\u5185\\u5B58\\u7684\\u4F7F\\u7528\\u4E0D\\u4F1A\\u592A\\u5927\\u7684\\u589E\\u957F\\u3002\"), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7B2C\\u4E8C\\u7248\\uFF1A\\u6DFB\\u52A0\\u56FE\\u7247\\u52A0\\u8F7D\\u961F\\u5217\")), mdx(\"p\", null, \"\\u5BF9\\u4E8E\\u4E00\\u4E9B\\u6BD4\\u8F83\\u5927\\u7684\\u56FE\\u7247\\uFF0C\\u6BD4\\u5982 webp \\u52A8\\u56FE\\u548C gif \\u56FE\\u7247\\uFF0C\\u5728\\u52A0\\u8F7D\\u7684\\u65F6\\u5019\\u4F1A\\u51FA\\u73B0\\u5F88\\u4E25\\u91CD\\u7684 loading \\u7B49\\u5F85\\uFF0C\\u6B64\\u65F6\\u5728\\u56FE\\u7247\\u52A0\\u8F7D\\u903B\\u8F91\\u4E2D\\u6DFB\\u52A0\\u4E86 \\u961F\\u5217\\u52A0\\u8F7D\\u7684\\u529F\\u80FD\\uFF0C\\u6ED1\\u52A8\\u8FC7\\u7A0B\\u4E2D\\u540C\\u65F6\\u6700\\u591A\\u53EA\\u52A0\\u8F7D 2 \\u5F20\\u56FE\\u7247\\uFF0C\\u7136\\u540E\\u6ED1\\u52A8\\u7684\\u8FC7\\u7A0B\\u4E2D\\uFF0C\\u5728\\u89C6\\u56FE\\u4E2D\\u7684\\u56FE\\u7247\\u4F1A\\u88AB\\u63D0\\u5230\\u6700\\u4F18\\u5148\\u7684\\u4F4D\\u7F6E\\u3002\\u66F4\\u4F18\\u5148\\u4FDD\\u8BC1\\u7528\\u6237\\u7684\\u89C6\\u89C9\\u5173\\u6CE8\\u70B9\\u7684\\u56FE\\u7247\\u52A0\\u8F7D\\uFF0C\\u800C\\u5DF2\\u7ECF\\u5212\\u8FC7\\u53BB\\u7684\\u56FE\\u7247\\u4F1A\\u88AB\\u5EF6\\u540E\\u751A\\u81F3\\u76F4\\u63A5\\u53D6\\u6D88\\u4E0B\\u8F7D\\u3002\"), mdx(\"ol\", {\n    \"start\": 3\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7B2C\\u4E09\\u7248\\uFF1A\\u56FE\\u7247\\u683C\\u5F0F\\u548C\\u8D28\\u91CF\")), mdx(\"p\", null, \"webp \\u7684\\u652F\\u6301\\u6BD4\\u8F83\\u597D\\uFF0C\\u76F8\\u6BD4\\u4E4B\\u524D\\u7684 gif \\u6587\\u4EF6\\u66F4\\u5C0F\\uFF0C\\u6240\\u4EE5\\u7F13\\u5B58\\u548C\\u52A0\\u8F7D\\u66F4\\u7406\\u60F3\\uFF0C\\u540E\\u671F\\u5168\\u90E8\\u6362\\u6210 webp \\u7684\\u683C\\u5F0F\\u6765\\u63D0\\u9AD8\\u52A0\\u8F7D\\u6548\\u7387\\u3002\"), mdx(\"p\", null, \"\\u53E6\\u4E00\\u65B9\\u9762\\u68B3\\u7406\\u5168\\u90E8\\u5E94\\u7528\\u5185\\u7684\\u56FE\\u7247\\u8D28\\u91CF\\uFF0C\\u786E\\u5B9A\\u7F29\\u7565\\u56FE\\u7684\\u8D28\\u91CF\\uFF0C\\u5728\\u670D\\u52A1\\u7AEF\\u76F4\\u63A5\\u5207\\u597D\\u9700\\u8981\\u7684\\u5C3A\\u5BF8\\uFF0C\\u8D28\\u91CF\\u4E5F\\u4F7F\\u7528\\u66F4\\u9AD8\\u538B\\u7F29\\u7684\\u683C\\u5F0F\\u548C\\u6070\\u5F53\\u7684\\u8D28\\u91CF\\u9009\\u9879\\u3002\"), mdx(\"h3\", null, \"4. \\u591A\\u9875\\u9762\\u5185\\u5B58\\u4F18\\u5316\"), mdx(\"div\", {\n    \"style\": {},\n    \"'flex',\": \"\",\n    \"justifycontent:\": \"\",\n    \"'center'}}\": \"\"\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"figure\",\n    \"src\": \"/flutter-per-4-d0a86f4617dc7fc9ce2ac51d358ee81e.svg\"\n  }), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u591A\\u9875\\u9762\\u5806\\u6808\\u5185\\u5BB9\"), \"\\n  \")), mdx(\"p\", null, \"\\u5728\\u4F7F\\u7528\\u5185\\u5B58\\u5206\\u6790\\u5DE5\\u5177\\u7684\\u65F6\\u5019\\uFF0C\\u53D1\\u73B0\\u9875\\u9762\\u5806\\u6808\\u589E\\u591A\\u7684\\u65F6\\u5019\\uFF0C\\u5185\\u5B58\\u4E5F\\u662F\\u589E\\u957F\\u7684\\uFF0C\\u4E5F\\u5C31\\u662F\\u65B0\\u9875\\u9762\\u7684\\u5165\\u6808\\u4E4B\\u540E\\uFF0C\\u4E4B\\u524D\\u7684\\u9875\\u9762\\u5E76\\u4E0D\\u4F1A\\u56DE\\u6536\\u5185\\u5B58\\u5360\\u7528\\u4E0D\\u4F1A\\u51CF\\u5C11\\uFF0C\\u5728\\u5185\\u5B58\\u7D27\\u5F20\\u7684\\u65F6\\u5019\\u4E5F\\u5E76\\u4E0D\\u4F1A\\u9500\\u6BC1\\u3002\\u8FD9\\u4E2A\\u7279\\u6027\\u5C24\\u5176\\u662F\\u5728\\u591A\\u4E2A\\u9875\\u9762\\u90FD\\u5305\\u542B\\u5F88\\u591A\\u56FE\\u7247\\u8D44\\u6E90\\u7684\\u65F6\\u5019\\uFF0C\\u5F88\\u591A\\u9875\\u9762\\u7684\\u8D44\\u6E90\\u5185\\u5B58\\u53E0\\u52A0\\uFF0C\\u5C31\\u4F1A\\u51FA\\u73B0\\u5076\\u5C14\\u7684\\u5185\\u5B58\\u66B4\\u6DA8\\u5D29\\u6E83\\uFF0C\\u6211\\u4EEC\\u9047\\u5230\\u4E86\\u5F88\\u591A\\u60C5\\u51B5\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u95EE\\u9898\\u548C\\u4E4B\\u524D\\u7684 keep-alive \\u6BD4\\u8F83\\u76F8\\u4F3C\\uFF0C\\u53EA\\u4E0D\\u8FC7\\u8FD9\\u4E2A\\u662F\\u8DEF\\u7531\\u7684\\u673A\\u5236\\u3002\\u6240\\u4EE5\\u6211\\u4EEC\\u8003\\u8651\\u9875\\u9762\\u5207\\u6362\\u7684\\u65F6\\u5019\\uFF0C\\u5728\\u65B0\\u7684\\u9875\\u9762\\u6253\\u5F00\\u540E\\uFF0C\\u524D\\u9762\\u7684\\u9875\\u9762\\u5982\\u679C\\u662F\\u53EF\\u4EE5\\u7F13\\u5B58\\u7684\\uFF08\\u5F97\\u76CA\\u4E8E\\u4E4B\\u524D\\u7684\\u5217\\u8868\\u7F13\\u5B58\\u7B56\\u7565\\uFF09\\uFF0C\\u5C31\\u6807\\u8BB0\\u4E3A\\u53EF\\u56DE\\u6536\\uFF0C\\u8BA9\\u7EC4\\u4EF6\\u7684\\u5185\\u5B58\\u5360\\u7528\\u9500\\u6BC1\\uFF0C\\u4F46\\u662F\\u4FDD\\u7559\\u9875\\u9762\\u7684\\u6570\\u636E\\u5185\\u5B58\\u3002\\u9875\\u9762\\u51FA\\u6808\\u7684\\u65F6\\u5019\\uFF0C\\u4E4B\\u524D\\u7684\\u9875\\u9762\\u518D\\u91CD\\u65B0\\u6839\\u636E\\u4EE5\\u4FDD\\u5B58\\u7684\\u6570\\u636E\\u91CD\\u65B0\\u521D\\u59CB\\u5316\\uFF0C\\u8FD9\\u6837\\u5C31\\u53EF\\u4EE5\\u548C state \\u7684\\u4FDD\\u7559\\u65B9\\u6848\\u76F8\\u540C\\uFF0C\\u8282\\u7701\\u4E0D\\u53EF\\u89C1\\u9875\\u9762\\u7684\\u5185\\u5B58\\u5360\\u7528\\uFF0C\\u6548\\u679C\\u8FD8\\u662F\\u53EF\\u4EE5\\u63A5\\u53D7\\u7684\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u8F83\\u91CD\\u8981\\u7684\\u5C31\\u662F\\u600E\\u4E48\\u5224\\u65AD\\u5F53\\u524D\\u9875\\u9762\\u662F\\u5728\\u524D\\u9762\\u800C\\u4E14\\u4E0D\\u53EF\\u89C1\\u7684\\uFF0C\\u6BD4\\u5982 overlay \\u7684\\u8DEF\\u7531\\u4E4B\\u524D\\u7684\\u9875\\u9762\\u9700\\u8981\\u53EF\\u89C1\\uFF0C\\u8FD9\\u6574\\u4E2A\\u8DEF\\u7531\\u5C42\\u9762\\u7684\\u5224\\u5B9A\\u9700\\u8981\\u4E00\\u4E2A\\u989D\\u5916\\u7684\\u5C01\\u88C5\\uFF0C\\u63D0\\u4F9B\\u8DEF\\u7531\\u76F8\\u5173\\u7684\\u4FE1\\u606F\\u3002\\u7531\\u4E8E\\u6211\\u4EEC flutter \\u7684\\u8DEF\\u7531\\u6BD4\\u8F83\\u96C6\\u4E2D\\uFF0C\\u800C\\u4E14\\u9875\\u9762\\u7684 state \\u80FD\\u591F\\u7F13\\u5B58\\uFF0C\\u8FD9\\u4E2A\\u5730\\u65B9\\u6BD4\\u8F83\\u597D\\u68B3\\u7406\\u3002\\u5982\\u679C\\u9875\\u9762\\u5185\\u5BB9\\u590D\\u6742\\uFF0C\\u8DEF\\u7531\\u4EA4\\u9519\\uFF0C\\u8FD9\\u91CC\\u7684\\u591A\\u9875\\u9762\\u6570\\u636E\\u6682\\u5B58\\u53EF\\u80FD\\u5C31\\u4E0D\\u4F1A\\u90A3\\u4E48\\u597D\\u5904\\u7406\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u800C\\u4E14\\u5982\\u679C\\u9700\\u8981\\u9875\\u9762\\u627F\\u8F7D\\u4E00\\u5B9A\\u7684\\u903B\\u8F91\\uFF0C\\u6BD4\\u5982\\u4E0D\\u53EF\\u89C1\\u72B6\\u6001\\u4E5F\\u8981\\u76D1\\u542C\\u67D0\\u4E2A\\u64CD\\u4F5C\\u505A\\u4E00\\u4E9B\\u66F4\\u65B0\\uFF0C\\u90A3\\u4E48\\u4E45\\u6CA1\\u529E\\u6CD5\\u505A\\u9875\\u9762\\u7684\\u9500\\u6BC1\\uFF0C\\u8FD9\\u4E2A\\u8FD8\\u662F\\u6839\\u636E\\u5177\\u4F53\\u7684\\u9875\\u9762\\u505A\\u7279\\u522B\\u7684\\u5904\\u7406\\uFF0C\\u4E0D\\u80FD\\u5168\\u90E8\\u5207\\u5272\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u591A\\u9875\\u9762\\u7684\\u5185\\u5B58\\u4F18\\u5316\\u5BF9\\u5185\\u5B58\\u589E\\u957F\\u7684\\u9650\\u5236\\u4F18\\u5316\\u5F88\\u4E0D\\u9519\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u7ED3\\u679C\"), mdx(\"p\", null, \"\\u6700\\u540E\\u7684 APP \\u6548\\u679C\\u867D\\u7136\\u727A\\u7272\\u4E86\\u4E00\\u90E8\\u5206\\u62D4\\u9AD8\\u7684\\u4F53\\u9A8C\\uFF0C\\u4F46\\u662F\\u5185\\u5B58\\u548C\\u7A33\\u5B9A\\u6027\\u90FD\\u63D0\\u9AD8\\u4E86\\u5F88\\u591A\\u3002\\u8FDB\\u4E00\\u6B65\\u7684\\u4F18\\u5316\\u8FD8\\u6709\\u5F88\\u591A\\uFF0C\\u4F46\\u662F\\u76EE\\u524D\\u5DF2\\u7ECF\\u89E3\\u51B3\\u4E86\\u5F88\\u5927\\u7684\\u90E8\\u5206\\uFF0C\\u540E\\u7EED\\u6839\\u636E\\u9700\\u8981\\u518D\\u9488\\u5BF9\\u6027\\u7684\\u4F18\\u5316\\u4E00\\u4E9B\\u573A\\u666F\\uFF0C\\u5BF9\\u6781\\u81F4\\u7684\\u8FFD\\u6C42\\u662F\\u6CA1\\u6709\\u5C3D\\u5934\\u7684\\uFF0C\\u4F46\\u662F\\u4E1A\\u52A1\\u7684\\u6548\\u76CA\\u548C\\u5E73\\u8861\\u4E5F\\u90FD\\u9700\\u8981\\u8003\\u8651\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/react-pratice-and-performance/react-pratice-and-performance.md","id":"beeddcae-7d80-5cbf-9952-0567f3ee19be","parent":{"name":"react-pratice-and-performance","sourceInstanceName":"blog"},"excerpt":"大部分的 React 开发是不需要考虑性能优化的，因为很多业务复杂度不需要这么苛刻的需求，常见的页面和交互都比较简单，展示型的组件除了长列表并没有太多性能问题。不过 React 这类框架生来就是能够搭建大型单页应用的，所以性能问题在这些应用级别的页面中还是很值得说道的。 好巧不巧，我在项目中就遇到了很多的性能问题， 🌋 WebIDE…","fields":{"title":"📊 React 实践技巧和性能优化","slug":"/blog/react-pratice-and-performance","description":"如今单单实现业务目标已经不够了，性能和体验是上层产品的基础，更加优质、体验更好的业务变得越来越重要。所以实现极致的性能、提升产品体验，是很值得追求的一件事情。","date":"2020-02-24","redirects":null,"datetime":"2020-02-24 20:24:36","categories":["code"],"series":null,"tags":["react","hooks","pratice","performance","技巧","最佳实践","性能优化","思考","功能"],"status":"online"},"frontmatter":{"published":null,"tags":["react","hooks","pratice","performance","技巧","最佳实践","性能优化","思考","功能"],"theme":null,"slug":"react-pratice-and-performance","date":"2020-02-24 20:24:36"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"react-pratice-and-performance\",\n  \"title\": \"📊 React 实践技巧和性能优化\",\n  \"date\": \"2020-02-24 20:24:36\",\n  \"author\": \"Ubug\",\n  \"description\": \"如今单单实现业务目标已经不够了，性能和体验是上层产品的基础，更加优质、体验更好的业务变得越来越重要。所以实现极致的性能、提升产品体验，是很值得追求的一件事情。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"react\", \"hooks\", \"pratice\", \"performance\", \"技巧\", \"最佳实践\", \"性能优化\", \"思考\", \"功能\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u7684 React \\u5F00\\u53D1\\u662F\\u4E0D\\u9700\\u8981\\u8003\\u8651\\u6027\\u80FD\\u4F18\\u5316\\u7684\\uFF0C\\u56E0\\u4E3A\\u5F88\\u591A\\u4E1A\\u52A1\\u590D\\u6742\\u5EA6\\u4E0D\\u9700\\u8981\\u8FD9\\u4E48\\u82DB\\u523B\\u7684\\u9700\\u6C42\\uFF0C\\u5E38\\u89C1\\u7684\\u9875\\u9762\\u548C\\u4EA4\\u4E92\\u90FD\\u6BD4\\u8F83\\u7B80\\u5355\\uFF0C\\u5C55\\u793A\\u578B\\u7684\\u7EC4\\u4EF6\\u9664\\u4E86\\u957F\\u5217\\u8868\\u5E76\\u6CA1\\u6709\\u592A\\u591A\\u6027\\u80FD\\u95EE\\u9898\\u3002\\u4E0D\\u8FC7 React \\u8FD9\\u7C7B\\u6846\\u67B6\\u751F\\u6765\\u5C31\\u662F\\u80FD\\u591F\\u642D\\u5EFA\\u5927\\u578B\\u5355\\u9875\\u5E94\\u7528\\u7684\\uFF0C\\u6240\\u4EE5\\u6027\\u80FD\\u95EE\\u9898\\u5728\\u8FD9\\u4E9B\\u5E94\\u7528\\u7EA7\\u522B\\u7684\\u9875\\u9762\\u4E2D\\u8FD8\\u662F\\u5F88\\u503C\\u5F97\\u8BF4\\u9053\\u7684\\u3002\"), mdx(\"p\", null, \"\\u597D\\u5DE7\\u4E0D\\u5DE7\\uFF0C\\u6211\\u5728\\u9879\\u76EE\\u4E2D\\u5C31\\u9047\\u5230\\u4E86\\u5F88\\u591A\\u7684\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/workpad-part-1\"\n  }, \"\\uD83C\\uDF0B WebIDE \\u7684\\u5F00\\u53D1\\u8BB0\\u5F55\\u5176\\u4E00\\uFF08\\u524D\\u8A00\\u548C\\u6982\\u89C8\\uFF09\"), \" \\u4E1A\\u52A1\\u6A21\\u578B\\u5F88\\u590D\\u6742\\uFF0C\\u72B6\\u6001\\u7BA1\\u7406\\u5F88\\u590D\\u6742\\uFF0C\\u5F88\\u591A\\u7EC4\\u4EF6\\u66F4\\u65B0\\u9891\\u7E41\\uFF0C\\u5B9E\\u8DF5\\u4E86\\u5F88\\u591A\\u7684\\u6027\\u80FD\\u4F18\\u5316\\u7684\\u624B\\u6BB5\\uFF0C\\u8FD9\\u91CC\\u603B\\u7ED3\\u4E0B\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001\\u91CF\\u5316\\u6307\\u6807\"), mdx(\"p\", null, \"\\u201C\\u5361\\u987F\\u201D \\u662F\\u4E2A\\u5F88\\u4E3B\\u89C2\\u7684\\u611F\\u53D7\\uFF0C\\u6027\\u80FD\\u4F18\\u5316\\u4E4B\\u524D\\u9700\\u8981\\u5C06\\u8FD9\\u4E2A\\u4E8B\\u60C5\\u91CF\\u5316\\uFF0C\\u4E00\\u5B9A\\u7A0B\\u5EA6\\u53EF\\u4EE5\\u8BF4 \\u201C\\u5361\\u987F\\u201D = \\u201C\\u8D85\\u8FC7 16.67ms \\u4E0D\\u80FD\\u54CD\\u5E94\\u64CD\\u4F5C\\u6216\\u8005\\u6267\\u884C\\u6E32\\u67D3\\u201D\\uFF0C\\u6240\\u4EE5\\u6267\\u884C\\u4E00\\u4E2A\\u6E32\\u67D3\\u6216\\u8005\\u8BA1\\u7B97\\u7684\\u65F6\\u95F4\\u95F4\\u9694\\u53EF\\u4EE5\\u5224\\u65AD\\u754C\\u9762\\u5361\\u987F\\u3002\"), mdx(\"p\", null, \"\\u53E6\\u4E00\\u65B9\\u9762\\u6027\\u80FD\\u4F18\\u5316\\u4E0D\\u4EC5\\u4EC5\\u8BF4\\u4F18\\u5316\\u5230\\u4E0D\\u5361\\u987F\\uFF0C\\u53EF\\u80FD\\u5BF9\\u4E8E\\u5F88\\u591A\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\\u548C\\u8BA1\\u7B97\\u4E5F\\u662F\\u9700\\u6C42\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u8FD8\\u6709\\u4EA4\\u4E92\\u548C\\u89C6\\u89C9\\u65B9\\u9762\\u7684\\u4F18\\u5316\\uFF0C\\u6BD4\\u5982\\u9996\\u5C4F\\u65F6\\u95F4(First Contentful Paint)\\u3001\\u4E3B\\u8981\\u5185\\u5BB9\\u65F6\\u95F4(First Meaningful Paint)\\u3001\\u53EF\\u54CD\\u5E94\\u65F6\\u95F4(Time To Interactive)\\u3001\\u7528\\u6237\\u54CD\\u5E94\\u548C\\u7EC4\\u4EF6\\u6E32\\u67D3\\u7684\\u534F\\u8C03\\u3001\\u72B6\\u6001\\u6D3E\\u53D1\\u548C\\u8BA2\\u9605\\u673A\\u5236\\u7B49\\u7B49\\uFF0C\\u4F18\\u5316\\u4E86\\u4E4B\\u540E\\u80FD\\u6709\\u66F4\\u6D41\\u7545\\u7684\\u4F53\\u9A8C\\uFF0C\\u8FD9\\u5C31\\u662F\\u66F4\\u9AD8\\u8D28\\u91CF\\u7684\\u8981\\u6C42\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u5DE5\\u5177\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Chrome Dev Tools / Performance / Lighthouse \\uFF0C\\u548C\\u4F20\\u7EDF\\u7684\\u65B9\\u5F0F\\u4E00\\u6837\\uFF0C\\u800C\\u4E14\\u4E5F\\u80FD\\u627E\\u51FA\\u5927\\u90E8\\u5206\\u7684\\u6027\\u80FD\\u74F6\\u9888\\uFF1B\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"651px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/593737bfbddffc68744ad62bd5bbe31e/cac84/performance.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"35.13513513513513%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsSAAALEgHS3X78AAABY0lEQVQY03WOW0sCYRCG9y9GJJVZdpDE05YlEfQngoqoKPCikmyJPERdlK4uiZpmmrqeUpMUXc1y3W897Pe1ttlF0DDMO/PCMzPYR9FBk5qEy0C79TSpL/gMpQDeThm5lLFNL4PsWjW8FT3XP18YIlZ91o7nnXjDtcJ6TC2PCQP1VPB4IniiiBELOae65tI0vdoGqWXc2tqdukYusTlL8VqRJkbytjHOO9nzyXlqokONdygZ1u9yrwFz6HIxcCbzn8pphzJln0nblFVS1fTOv9/jffalkyHakX0+ss0/bvLRPRA7ANFdPn6EQQgRhAKI84w7bNEFzYqoVRUiphPO2cLNFBNYR7AHpRQ4odeCfbGySACiP4ClQAi9xQ7Tt6NMcqfk05UfVpmnDa5CiD4aHPhWJE2SIkzqxNtibZWDmas5tuJnC9RnnuxUwwJXH8LwF/sLS0uFHgC1pNBtD52fj/6DvwBwB17K1/fl3gAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Chrome Performance\",\n    \"title\": \"Chrome Performance\",\n    \"src\": \"/static/593737bfbddffc68744ad62bd5bbe31e/cac84/performance.png\",\n    \"srcSet\": [\"/static/593737bfbddffc68744ad62bd5bbe31e/2c191/performance.png 259w\", \"/static/593737bfbddffc68744ad62bd5bbe31e/86b01/performance.png 518w\", \"/static/593737bfbddffc68744ad62bd5bbe31e/cac84/performance.png 651w\"],\n    \"sizes\": \"(max-width: 651px) 100vw, 651px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"Chrome Performance\"), \"\\n  \"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/profiler.html\"\n  }, \"React Profiler\"), \" React \\u5185\\u7F6E\\u7684\\uFF0C\\u53EF\\u80FD\\u4E0D\\u662F\\u5F88\\u51C6\\u786E\\uFF0C\\u4F46\\u662F\\u91CD\\u70B9\\u5EA6\\u91CF\\u6E32\\u67D3\\u8FC7\\u7A0B\\u4E2D\\u7684\\u5F00\\u9500\\uFF1B\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1012px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/9cce099ca58215148a348d8fc0fafcb8/16c97/profiler.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"47.87644787644788%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAAB3klEQVQoz62QPW/TUBSGLeCvsfAX8AADC0gsjAxMReFDYWi6IAYnZGmn8hEaRJRWtIEmDnXsxElTApGJAo2/rx3bpb4+h2snLcyor/To+NrnPD42J757ca0ubt2QDyReliW+00k54BWlw7fEJl+tVfn6Tp1//6HKi+023+v1+K6isNplPTKbka+zelOSpKtcmqNhf2TPA/ylm+jP5xhFUUYYhkg8gp7voeVYaNomhpGHvk+QsHsuITgPAnb2MI2maVImPBx+7esmQdO0Y8u0qWMtsBn6TKemYVHtx5gOxyM6mU2pMxnTn+0mPZbaNDR0GlN6mgoNw2gy3RWutpkbiG/u49FejvZ3V0DdzYHayIO6/RC+fX4Ch58ewUh5CYE9hegkZtUCTVXAm04gdh1gLpoKXddtMeFlrvBWGNxef4oPtp4nwt46bkg13P/yCh+v3cK10l3c3C6gGxE8C00S/B3H52cAyISO44jZho3vo0F1dowN3UwmwQmErKc71WB15zV8HDTBIFa6BSTwNwvPec6ErUw493x1+TL2L9hD1kABKV18Cl0sldB0MOXf6yWnS+F+JvR8X8MLCCGkmwmLxeK9crm8WiqV8oxn/0GezRcEQbiTCZe5dAFwlUqF+wOZbVJUsAEppAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"React Profiler\",\n    \"title\": \"React Profiler\",\n    \"src\": \"/static/9cce099ca58215148a348d8fc0fafcb8/16c97/profiler.png\",\n    \"srcSet\": [\"/static/9cce099ca58215148a348d8fc0fafcb8/2c191/profiler.png 259w\", \"/static/9cce099ca58215148a348d8fc0fafcb8/86b01/profiler.png 518w\", \"/static/9cce099ca58215148a348d8fc0fafcb8/16c97/profiler.png 1012w\"],\n    \"sizes\": \"(max-width: 1012px) 100vw, 1012px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"React Profiler\"), \"\\n  \")))), mdx(\"div\", {\n    \"style\": {\n      \"display\": \"flex\",\n      \"justifyContent\": \"center\"\n    }\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"figure\",\n    \"src\": \"/profiler2-39ba82394205242af7c37ccb3a631f4d.gif\"\n  }), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"React Profiler \\u4F7F\\u7528\"), \"\\n  \")), mdx(\"ol\", {\n    \"start\": 3\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API\"\n  }, \"User Timing\"), \" \\u4F7F\\u7528\\u8F83\\u9AD8\\u7CBE\\u5EA6\\u7684\\u63A5\\u53E3\\u624B\\u52A8\\u6D4B\\u91CF\\u4E00\\u4E9B\\u5F00\\u9500\\uFF0CReact \\u5185\\u90E8\\u4E5F\\u662F\\u4F7F\\u7528\\u4E86\\u8FD9\\u4E2A\\u63A5\\u53E3\\u53EF\\u4EE5\\u5728\\u6D4F\\u89C8\\u5668\\u7684 Performance \\u4E2D\\u805A\\u5408\\u7EC4\\u4EF6\\u7684\\u4FE1\\u606F\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://github.com/puppeteer/puppeteer\"\n  }, \"Puppeteer\"), \" \\u53EF\\u4EE5\\u5FFD\\u7565 UI \\u6E32\\u67D3\\uFF0C\\u624B\\u52A8\\u6D4B\\u91CF\\u4E00\\u4E9B\\u8BA1\\u7B97\\u7684\\u5F00\\u9500\\uFF1B\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u7684\\u5DE5\\u5177\\u80FD\\u591F\\u8C03\\u8BD5\\u5230\\u5E38\\u89C1\\u7684\\u65F6\\u95F4\\u82B1\\u9500\\uFF0C\\u80FD\\u591F\\u5E2E\\u52A9\\u627E\\u5230\\u90A3\\u4E9B\\u8017\\u65F6\\u7684\\u51FD\\u6570\\u6216\\u8005\\u7EC4\\u4EF6\\uFF0C\\u80FD\\u89E3\\u51B3\\u5927\\u90E8\\u5206\\u95EE\\u9898\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u5361\\u987F\\u7684\\u8282\\u70B9\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u6E32\\u67D3\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9996\\u5C4F\\u6E32\\u67D3\\u3002\\u4ECE\\u7528\\u6237\\u6253\\u5F00\\u9875\\u9762\\uFF0C\\u5230\\u9875\\u9762\\u5185\\u4E3B\\u8981\\u5185\\u5BB9\\u5C55\\u793A\\u51FA\\u6765\\u7684\\u65F6\\u95F4\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u54CD\\u5E94\\u6E32\\u67D3\\u3002\\u7528\\u6237\\u7684\\u64CD\\u4F5C\\u5728\\u754C\\u9762\\u4E0A\\u5C55\\u793A\\u7684\\u54CD\\u5E94\\uFF0C\\u5207\\u6362 tab \\u5C55\\u793A\\u65B0\\u7684\\u5185\\u5BB9\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u7F51\\u7EDC\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7F51\\u7EDC\\u7684\\u901F\\u5EA6\\u4E5F\\u662F\\u975E\\u5E38\\u5F71\\u54CD\\u7528\\u6237\\u7684\\u8010\\u5FC3\\uFF0C\\u7528\\u6237\\u7684\\u5E73\\u5747\\u4E0A\\u7F51\\u901F\\u5EA6\\u5DF2\\u7ECF\\u5F88\\u5FEB\\u4E86\\uFF0C\\u5982\\u679C\\u4F60\\u7684\\u7F51\\u7AD9\\u52A0\\u8F7D\\u9875\\u9762\\u6216\\u8005\\u54CD\\u5E94\\u67E5\\u8BE2\\u7684\\u65F6\\u95F4\\u6709\\u70B9\\u957F\\uFF0C\\u7528\\u6237\\u53EF\\u80FD\\u5C31\\u4F1A\\u6000\\u7591\\u53EF\\u80FD\\u51FA\\u73B0\\u4E86\\u4EC0\\u4E48\\u95EE\\u9898\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u540E\\u7AEF\\u4F20\\u7EDF\\u7684\\u505A\\u6CD5\\uFF1A\\u8D1F\\u8F7D\\u5747\\u8861\\u3001CDN\\u3001HTTP/2\\u3001\\u67E5\\u8BE2\\u7F13\\u5B58\\u3001\\u56FE\\u7247\\u538B\\u7F29\\u3001webp \\u7B49\\u624B\\u6BB5\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u524D\\u7AEF\\u80FD\\u505A\\u7684\\uFF1A\\u672C\\u5730\\u7F13\\u5B58\\u3001http \\u8BF7\\u6C42\\u7F13\\u5B58\\u3001localStorage \\u7F13\\u5B58\\u3001service worker\\u3001PWA\\u3001\\u9884\\u52A0\\u8F7D\\u6570\\u636E\\u7B49\\u53EF\\u4EE5\\u975E\\u5E38\\u6709\\u6548\\u7684\\u4F18\\u5316\\u7F51\\u7EDC\\u95EE\\u9898\\uFF08\\u8FD9\\u5757\\u4E5F\\u5F88\\u503C\\u5F97\\u6DF1\\u5165\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Preload\\u3001Prefetch\\u3001Preconnect \\u63D0\\u524D\\u8FDB\\u884C\\u9884\\u8FDE\\u63A5\\u4EE5\\u907F\\u514D DNS\\u3001TCP \\u4EE5\\u53CA TLS \\u5F80\\u8FD4\\u5EF6\\u8FDF\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528\\u6E10\\u8FDB\\u5F0F\\u7684\\u56FE\\u7247\\u3001\\u4EE3\\u7801\\u62C6\\u5206\\u7B49\\u5206\\u9636\\u6BB5\\u52A0\\u8F7D\\u548C\\u5C55\\u793A\\u5185\\u5BB9\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"SSR \\u670D\\u52A1\\u7AEF\\u9884\\u6E32\\u67D3\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u8BA1\\u7B97\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u524D\\u7AEF\\u7684\\u4E00\\u4E9B\\u64CD\\u4F5C\\u53EF\\u80FD\\u4F1A\\u5360\\u7528 JavaScript \\u7684\\u8BA1\\u7B97\\u8D44\\u6E90\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6BD4\\u5982\\u5305\\u4F53\\u79EF\\u3001\\u52A8\\u753B\\u3001\\u9891\\u7E41\\u54CD\\u5E94 scroll \\u6216\\u8005 mousemove \\u4E8B\\u4EF6\\uFF0C\\u6216\\u8005\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\")))), mdx(\"p\", null, \"\\u7C7B React \\u6846\\u67B6\\u76F8\\u6BD4\\u8F83\\u4F20\\u7EDF\\u7684\\u9875\\u9762\\u90FD\\u6BD4\\u8F83\\u5F31\\u4E00\\u4E9B\\uFF0C\\u56E0\\u4E3A\\u4E00\\u822C\\u4E0D\\u505A\\u4F18\\u5316\\uFF0C\\u9996\\u5C4F\\u6E32\\u67D3\\u80AF\\u5B9A\\u6BD4\\u9884\\u6E32\\u67D3\\u7684\\u6162\\u5F97\\u591A\\uFF0C\\u800C\\u4E14\\u5305\\u4F53\\u79EF\\u8F83\\u5927\\u5F71\\u54CD\\u7F51\\u7EDC\\u4F20\\u8F93\\uFF0C\\u6700\\u540E\\u6BCF\\u4E2A\\u7EC4\\u4EF6\\u90FD\\u8981\\u5148\\u8BA1\\u7B97\\u51FA\\u6765\\u624D\\u80FD\\u901A\\u8FC7 virtual dom \\u5230\\u771F\\u5B9E\\u754C\\u9762\\u4E0A\\u3002\"), mdx(\"p\", null, \"\\u6709\\u8FD9\\u4E9B\\u65B9\\u9762\\u7684\\u56E0\\u7D20\\uFF0C\\u4F46\\u662F\\u5177\\u4F53\\u5230\\u6BCF\\u4E00\\u4E2A\\u4F18\\u5316\\u70B9\\u90FD\\u6709\\u5F88\\u591A\\u7684\\u5B9E\\u8DF5\\uFF0C\\u4E00\\u822C\\u7684\\u9879\\u76EE\\u9009\\u62E9\\u6700\\u9002\\u5408\\u7684\\u5373\\u53EF\\uFF0C\\u8981\\u6C42\\u82DB\\u523B\\u7684\\u5728\\u8FD9\\u4E0A\\u9762\\u505A\\u5230\\u6781\\u81F4\\u4E5F\\u662F\\u5F88\\u4E0D\\u5BB9\\u6613\\u7684\\u3002\\u5E38\\u89C1\\u7684\\u4F18\\u5316\\u65B9\\u6CD5\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u51CF\\u5C11\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u964D\\u4F4E\\u72B6\\u6001\\u53D8\\u66F4\\u7684\\u5F71\\u54CD\\u8303\\u56F4\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8C03\\u5EA6\\u8BA1\\u7B97\\u4EE5\\u907F\\u514D\\u540C\\u65F6\\u963B\\u585E\")), mdx(\"h2\", null, \"\\u56DB\\u3001\\u5E38\\u89C1\\u77E5\\u8BC6\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u6211\\u8BA4\\u4E3A\\u6027\\u80FD\\u7684\\u6781\\u81F4\\u4F18\\u5316\\u66F4\\u5E94\\u8BE5\\u878D\\u5165\\u5728\\u4E00\\u822C\\u7F16\\u7801\\u8FC7\\u7A0B\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u4E25\\u91CD\\u4F9D\\u8D56\\u4E8E\\u4E8B\\u540E\\u7684\\u5EA6\\u91CF\\u548C\\u4E13\\u9879\\u4F18\\u5316\\u3002\\u56E0\\u4E3A\\u5F88\\u591A\\u7684\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\\uFF0C\\u662F\\u56E0\\u4E3A\\u6CA1\\u6709\\u7406\\u89E3\\u6574\\u4E2A\\u6846\\u67B6\\u7684\\u6D41\\u7A0B\\u548C\\u673A\\u5236\\uFF0C\\u53EF\\u80FD\\u4E1A\\u52A1\\u4F18\\u5148\\u7684\\u65F6\\u5019\\u5E76\\u4E0D\\u987E\\u7684\\u5F88\\u591A\\u6700\\u4F73\\u5B9E\\u8DF5\\u3002\")), mdx(\"p\", null, \"\\u6BD4\\u5982\\u6DFB\\u52A0\\u4E00\\u4E2A prop \\u53C2\\u6570\\u4F20\\u9012\\u4F60\\u7B2C\\u4E00\\u65F6\\u95F4\\u60F3\\u7684\\u662F\\u5B50\\u7EC4\\u4EF6\\u7528\\u5F97\\u5230\\uFF0C\\u800C\\u5F88\\u5C11\\u53BB\\u8003\\u8651\\u8FD9\\u4E2A\\u53C2\\u6570\\u5BF9\\u5B50\\u7EC4\\u4EF6\\u7684\\u91CD\\u590D\\u6E32\\u67D3\\u6709\\u591A\\u5927\\u5F71\\u54CD\\u3002\"), mdx(\"p\", null, \"\\u805A\\u7126\\u5230 React \\u8FD9\\u4E00\\u4E2A\\u6846\\u67B6\\u4E0A\\uFF0C\\u6709\\u5F88\\u591A\\u7684\\u601D\\u7EF4\\u5F62\\u5F0F\\u548C\\u4F20\\u7EDF\\u7684\\u7EC4\\u4EF6\\u5316\\u4E0D\\u540C\\uFF0C\\u8FD9\\u91CC\\u7740\\u91CD\\u8BF4\\u4E00\\u4E0B\\uFF1A\"), mdx(\"h3\", null, \"0. \\u4E25\\u683C\\u907F\\u514D\\u5927\\u7EC4\\u4EF6/\\u72B6\\u6001\\u591A\\u7684\\u7EC4\\u4EF6\"), mdx(\"p\", null, \"React \\u6216\\u8005\\u7C7B\\u4F3C\\u7684\\u8BA2\\u9605\\u66F4\\u65B0\\u673A\\u5236\\uFF0C\\u6700\\u5FCC\\u8BB3\\u7684\\u5C31\\u662F\\u5927\\u7C92\\u5EA6\\u7684\\u8BA2\\u9605\\u89E6\\u53D1\\uFF0C\\u800C React \\u54CD\\u5E94\\u5F0F\\u7684\\u6839\\u672C\\u4E5F\\u662F\\u4F9D\\u8D56\\u4E8E\\u6B64\\uFF0C\\u5927\\u7EC4\\u4EF6\\u6216\\u8005\\u72B6\\u6001\\u591A\\u7684\\u7EC4\\u4EF6\\u5C31\\u4F1A\\u5BFC\\u81F4\\u9891\\u7E41\\u72B6\\u6001\\u53D8\\u66F4\\u5BFC\\u81F4\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"p\", null, \"React \\u66F4\\u4F9D\\u8D56\\u4E8E state \\u7684\\u66F4\\u65B0\\uFF0C\\u6240\\u4EE5\\u9700\\u8981\\u5C06\\u9891\\u7E41\\u53D8\\u66F4\\u7684 state \\u8F6C\\u79FB\\u5230\\u5B50\\u7EC4\\u4EF6\\u6765\\u9694\\u79BB\\u53D8\\u66F4\\u3002\"), mdx(\"h3\", null, \"1. shouldComponentUpdate\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u662F\\u6700\\u57FA\\u7840\\u7684\\u91CD\\u590D\\u6E32\\u67D3\\u4F18\\u5316\\u903B\\u8F91\\uFF0C\\u544A\\u8BC9 React \\u54EA\\u4E9B\\u53D8\\u66F4\\u662F\\u4E0D\\u4F1A\\u5F71\\u54CD\\u7EC4\\u4EF6\\u7684\\u8868\\u73B0\\u7684\\uFF0C\\u4EE5\\u8DF3\\u8FC7\\u6E32\\u67D3\\u8FD0\\u7B97\\u7684\\u903B\\u8F91 UNSAFE_componentWillUpdate\\u3001render\\u3001componentDidUpdate \\u90FD\\u5C06\\u4E0D\\u4F1A\\u6267\\u884C\\u3002\"), mdx(\"p\", null, \"\\u4F7F\\u7528\\u4E0A\\u76F4\\u63A5\\u5728 shouldComponentUpdate \\u7684\\u751F\\u547D\\u5468\\u671F\\u4E2D\\u6BD4\\u5BF9 this.props \\u548C nextProps \\u4EE5\\u53CA this.state \\u548C nextState\\uFF0C\\u8FD4\\u56DE false \\u58F0\\u660E\\u672C\\u6B21\\u6E32\\u67D3\\u7684\\u903B\\u8F91\\u5230\\u6B64\\u4E0D\\u5FC5\\u5411\\u4E0B\\u8FDB\\u884C\\u4E86\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"shouldComponentUpdate(nextProps, nextStates) {\\n  if (nextStates.count === this.state.count) return false;\\n  if (nextStates.count2 !== this.state.count2) return false;\\n  return true\\n}\\n\")), mdx(PerForDemo0, {\n    mdxType: \"PerForDemo0\"\n  }), mdx(\"p\", null, \"\\u5F00\\u53D1\\u7684\\u65F6\\u5019\\u5982\\u679C\\u4F20\\u9012\\u7684\\u72B6\\u6001\\u503C\\u53EA\\u662F\\u4E2D\\u95F4\\u8FC7\\u7A0B\\u3001\\u6216\\u8005\\u9891\\u7E41\\u53D8\\u52A8\\u3001\\u6216\\u8005\\u53EF\\u4EE5\\u4E0D\\u66F4\\u65B0\\u754C\\u9762\\u4E4B\\u7C7B\\u7684\\u60C5\\u51B5\\uFF0C\\u53EF\\u4EE5\\u5728\\u6B64\\u5904\\u7EDF\\u4E00\\u5904\\u7406\\u3002\"), mdx(\"h3\", null, \"1. \\u7EC4\\u4EF6\\u8981\\u4E0D\\u8981 render \\u6E32\\u67D3\\u7531\\u4EC0\\u4E48\\u51B3\\u5B9A\\uFF1F\"), mdx(\"p\", null, \"\\u5148\\u770B\\u751F\\u547D\\u5468\\u671F\\u5F88\\u6E05\\u6670\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"React.Component\"), \" \\u7EC4\\u4EF6:\"), mdx(PerForDemo1, {\n    mdxType: \"PerForDemo1\"\n  }), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u81EA\\u8EAB\\u72B6\\u6001\\u53D8\\u66F4 / \\u4F20\\u9012\\u5C5E\\u6027\\u53D8\\u66F4 \\u5C31\\u4F1A\\u5BFC\\u81F4\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u5373\\u4F7F\\u72B6\\u6001\\u6CA1\\u6709\\u88AB\\u4F7F\\u7528\\uFF0C\\u5373\\u4F7F\\u72B6\\u6001\\u503C\\u6CA1\\u6709\\u53D8\\u52A8\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7236\\u7EC4\\u4EF6\\u6E32\\u67D3\\u4F1A\\u5BFC\\u81F4\\u5B50\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u5373\\u4F7F\\u7236\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u53D8\\u66F4\\u6CA1\\u6709\\u6D89\\u53CA\\u5B50\\u7EC4\\u4EF6\\u7684\\u4F9D\\u8D56\\u3002\")), mdx(\"p\", null, \"Component \\u4F1A\\u51FA\\u73B0\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\\u95EE\\u9898\\uFF0C\\u800C\\u5E73\\u65F6\\u63A8\\u8350\\u7684\\u53E6\\u4E00\\u4E2A\\u7EC4\\u4EF6 \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"React.PureComponent\")), \":\"), mdx(PerForDemo2, {\n    mdxType: \"PerForDemo2\"\n  }), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5982\\u679C\\u72B6\\u6001\\u6CA1\\u6709\\u88AB\\u4F7F\\u7528\\uFF0C\\u6216\\u8005\\u72B6\\u6001\\u503C\\u6CA1\\u6709\\u53D8\\u52A8\\u5219\\u4E0D\\u4F1A\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7236\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u53D8\\u66F4\\u6CA1\\u6709\\u6D89\\u53CA\\u5B50\\u7EC4\\u4EF6\\u7684\\u4F9D\\u8D56\\uFF0C\\u6216\\u8005\\u4F20\\u9012\\u503C\\u6CA1\\u6709\\u53D8\\u5316\\uFF0C\\u5B50\\u7EC4\\u4EF6\\u5C31\\u4E0D\\u4F1A\\u53D8\\u52A8\\u3002\")), mdx(\"p\", null, \"PureComponent \\u76F8\\u6BD4 Component \\u6027\\u80FD\\u66F4\\u597D\\u4E9B\\uFF0C\\u56E0\\u4E3A\\u5728 props \\u548C state \\u53D8\\u52A8\\u4E4B\\u540E\\uFF0CPureComponent \\u4F7F\\u7528 \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6D45\\u5BF9\\u6BD4\"), \" \\u7684\\u903B\\u8F91\\u5B9E\\u73B0 shouldComponentUpdate \\u8BA1\\u7B97\\u6210\\u672C\\u975E\\u5E38\\u4F4E\\u4F46\\u662F\\u5F88\\u6709\\u6548\\u7684\\u6027\\u80FD\\u4F18\\u5316\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F\\uFF0C\\u53EF\\u80FD\\u6709\\u65F6\\u5019\\u5BF9\\u8C61\\u6DF1\\u5C42\\u6570\\u636E\\u4E0D\\u4E00\\u81F4\\u5BFC\\u81F4\\u9700\\u8981\\u6E32\\u67D3\\u7684\\u65F6\\u5019\\u6CA1\\u6709\\u66F4\\u65B0\\u754C\\u9762\\uFF0C\\u6216\\u8005\\u76F8\\u540C\\u5C5E\\u6027\\u7684\\u4E0D\\u540C\\u5BF9\\u8C61\\u88AB\\u5224\\u65AD\\u4E3A\\u4E0D\\u540C\\u7684\\u503C\\u5F15\\u53D1\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"h3\", null, \"2. \\u7406\\u89E3\\u6D45\\u6BD4\\u8F83 shallowCompare\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u8BF4\\u4E86 PureComponent \\u7684\\u4F18\\u5316\\uFF0C\\u6D89\\u53CA\\u5230\\u6D45\\u6BD4\\u8F83\\uFF0C\\u4E0B\\u9762\\u662F\\u6838\\u5FC3\\u7684\\u903B\\u8F91\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"if (this._compositeType === CompositeTypes.PureClass) {\\n  shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);\\n}\\n\")), mdx(\"p\", null, \"\\u5176\\u4E2D \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/facebook/react/blob/a9b035b0c2b8235405835beca0c4db2cc37f18d0/packages/shared/shallowEqual.js\"\n  }, \"shallowEqual \\u6E90\\u7801\"), \"\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"function shallowEqual(objA: mixed, objB: mixed): boolean {\\n  // \\u6700\\u7B80\\u5355\\u7684\\u6D45\\u5C42\\u6BD4\\u8F83\\n  if (Object.is(objA, objB)) return true;\\n\\n  // \\u4E00\\u4E9B\\u8FB9\\u754C\\u6761\\u4EF6\\u548C\\u7B80\\u5355\\u7C7B\\u578B\\u6570\\u636E\\u5224\\u5B9A\\n  if (\\n    typeof objA !== 'object' ||\\n    objA === null ||\\n    typeof objB !== 'object' ||\\n    objB === null\\n  ) {\\n    return false;\\n  }\\n\\n  // \\u4E0B\\u9762\\u6DF1\\u5165\\u6BD4\\u8F83\\n\\n  const keysA = Object.keys(objA);\\n  const keysB = Object.keys(objB);\\n\\n  // \\u5982\\u679C\\u5C5E\\u6027\\u957F\\u5EA6\\u4E0D\\u540C\\n  if (keysA.length !== keysB.length) return false;\\n\\n  // \\u63A5\\u4E0B\\u6765\\u904D\\u5386\\u5C5E\\u6027\\u6BD4\\u8F83\\uFF0C\\u8BA1\\u7B97\\u53EF\\u80FD\\u8F83\\u591A\\uFF0C\\u6240\\u4EE5\\u653E\\u5230\\u6700\\u540E\\u3002\\u5C5E\\u6027\\u5DEE\\u5F02\\uFF0C\\u6216\\u8005\\u4E24\\u8005\\u540C\\u4E00\\u4E2A\\u5C5E\\u6027\\u4E0D\\u76F8\\u7B49\\n  for (let i = 0; i < keysA.length; i++) {\\n    if (\\n      !Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||\\n      !Object.is(objA[keysA[i]], objB[keysA[i]])\\n    ) {\\n      return false;\\n    }\\n  }\\n  return true;\\n}\\n\")), mdx(\"p\", null, \"\\u7528\\u51E0\\u4E2A\\u4F8B\\u5B50\\u5C31\\u80FD\\u77E5\\u9053\\uFF1A\"), mdx(RunTSX, {\n    isWhiteTheme: true,\n    codeStr: \"__helper.log(Object.is(null, undefined)); // false\\n__helper.log(Object.is(NaN, NaN)); // true\\n__helper.log(Object.is(-0, +0)); // false\\n__helper.log(Object.is({a:1,b:2}, {a:1,b:2})); // false\\n\\nconst c = {a: 0, b: 1, c: 2}\\nconst d = c\\nd.c = 4\\n// \\u5C5E\\u6027\\u53D8\\u52A8\\uFF0C\\u4F46\\u662F\\u6D45\\u6BD4\\u8F83\\u5224\\u65AD\\u76F8\\u540C\\uFF0C\\u5BFC\\u81F4 shouldComponentUpdate \\u5224\\u65AD\\u4E0D\\u9700\\u8981\\u66F4\\u65B0\\uFF0C\\u51FA\\u73B0\\u95EE\\u9898\\n__helper.log(Object.is(c, d)); // true\\n\\nconst e = {a: 0, b: 1, c: 2}\\nconst f = Object.assign({}, e)\\nf.c = 4\\n// Object.assign \\u53EF\\u4EE5\\u907F\\u514D\\u5F15\\u7528\\u76F8\\u540C\\uFF0C\\u4F46\\u662F\\u5BF9\\u4E8E\\u591A\\u5C42\\u5D4C\\u5957\\u8FD8\\u662F\\u6CA1\\u529E\\u6CD5\\n__helper.log(Object.is(e, f)); // true\\n\\n\\nfunction shallowEqual(objA: any, objB: any) {\\n  if (Object.is(objA, objB)) {\\n    return true;\\n  }\\n  if (\\n    typeof objA !== 'object' ||\\n    objA === null ||\\n    typeof objB !== 'object' ||\\n    objB === null\\n  ) {\\n    return false;\\n  }\\n  const keysA = Object.keys(objA);\\n  const keysB = Object.keys(objB);\\n  if (keysA.length !== keysB.length) {\\n    return false;\\n  }\\n  for (let i = 0; i < keysA.length; i++) {\\n    if (\\n      !Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||\\n      !Object.is(objA[keysA[i]], objB[keysA[i]])\\n    ) {\\n      return false;\\n    }\\n  }\\n  return true;\\n}\",\n    mdxType: \"RunTSX\"\n  }), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5BF9\\u4E8E\\u4F20\\u9012\\u6570\\u636E\\u662F\\u57FA\\u7840\\u6570\\u636E\\u7C7B\\u578B\\u7684\\u503C\\uFF0C\\u65E0\\u8111\\u7528 PureComponent \\u5C31\\u884C\\u4E86\\uFF0C\\u5BF9\\u4E8E\\u5F15\\u7528\\u76F8\\u540C\\u7684\\u6570\\u636E\\u7ED3\\u6784\\u6784\\uFF0C\\u5219\\u53EF\\u80FD\\u51FA\\u73B0\\u89C6\\u56FE\\u65E0\\u6CD5\\u66F4\\u65B0\\u95EE\\u9898\\uFF0C\\u9700\\u8981\\u81EA\\u5DF1\\u5904\\u7406\\u6BD4\\u8F83\\u7684\\u90E8\\u5206\\u6216\\u8005\\u4F7F\\u7528 immutable \\u7684\\u5904\\u7406\\u65B9\\u5F0F\\u3002\"), mdx(\"h3\", null, \"3. \\u7406\\u89E3 render \\u51FD\\u6570\\u6267\\u884C\\u7684\\u90E8\\u5206\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u53EF\\u80FD\\u9891\\u7E41\\u6267\\u884C\\u7684\\u7EAF\\u51FD\\u6570\\u7684\\u8F93\\u51FA\\uFF0C\\u4E0D\\u5E94\\u8BE5\\u5305\\u542B\\u526F\\u4F5C\\u7528\\u548C\\u53EF\\u7F13\\u5B58\\u7684\\u91CD\\u590D\\u8BA1\\u7B97\\u3002render \\u5728\\u7EC4\\u4EF6\\u610F\\u4E49\\u91CC\\u9762\\u8868\\u793A\\u7684\\u662F\\u6784\\u5EFA\\u89C6\\u56FE\\u5C42\\u7684\\u903B\\u8F91\\uFF0C\\u5B58\\u5728\\u7684\\u610F\\u4E49\\u4EC5\\u5728\\u4E8E\\u6839\\u636E\\u73B0\\u6709\\u7684\\u72B6\\u6001\\u548C\\u6570\\u636E\\u8F93\\u51FA\\u7EC4\\u4EF6\\u5185\\u5BB9\\u3002\\u5728\\u6B64\\u610F\\u4E49\\u4E0A\\u6765\\u8BB2\\uFF0C\\u8FD9\\u5C31\\u662F\\u4E2A\\u7EAF\\u51FD\\u6570\\u7EC4\\u4EF6\\uFF0C\\u4E0D\\u5E94\\u8BE5\\u51FA\\u73B0\\u526F\\u4F5C\\u7528\\u6216\\u8005\\u66F4\\u65B0\\u72B6\\u6001\\u4E4B\\u7C7B\\u7684\\u903B\\u8F91\\uFF0C\\u66F4\\u4E0D\\u5E94\\u8BE5\\u5B58\\u5728\\u80FD\\u591F\\u7F13\\u5B58\\u7684\\u8BA1\\u7B97\\uFF0C\\u4EC5\\u5E94\\u8BE5\\u51FA\\u73B0\\u8F93\\u51FA\\u76F8\\u5173\\u7684\\u90E8\\u5206\\uFF0C\\u5982\\u679C\\u6709\\u8BA1\\u7B97\\u5C5E\\u6027\\u6BD4\\u5982\\u9700\\u8981\\u8BA1\\u7B97 10000 \\u591A\\u4E2A\\u4EBA\\u7684\\u5E73\\u5747\\u8EAB\\u9AD8\\uFF0C\\u4E0D\\u5E94\\u8BE5\\u5728 render \\u91CC\\u9762\\u8BA1\\u7B97\\uFF0C\\u800C\\u5E94\\u8BE5\\u5728\\u53D8\\u66F4\\u7684\\u65F6\\u5019\\u8BA1\\u7B97\\u51FA\\u7ED3\\u679C\\u7F13\\u5B58\\u8D77\\u6765\\u518D render\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"render \\u7684\\u6267\\u884C\\u5B8C\\u6BD5\\u4EC5\\u8868\\u793A\\u7EC4\\u4EF6\\u903B\\u8F91\\u4EA4\\u7ED9\\u4E86 react\\uFF0C\\u7ED8\\u5236\\u5230\\u754C\\u9762\\u662F\\u7531 react \\u63A5\\u7BA1\\u7684\\u3002render \\u51FD\\u6570\\u5E76\\u4E0D\\u662F\\u76F4\\u63A5\\u8F93\\u51FA\\u754C\\u9762\\u5185\\u5BB9\\u7684\\uFF0C\\u800C\\u662F\\u4EC5\\u8F93\\u51FA\\u4E00\\u4E2A\\u63CF\\u8FF0\\u7ED3\\u6784\\uFF0C\\u7136\\u540E react \\u6846\\u67B6\\u63A5\\u7BA1\\u8C03\\u5EA6\\u5230\\u865A\\u62DF DOM \\u6700\\u540E\\u624D\\u4F1A\\u5728\\u754C\\u9762\\u4E0A\\u770B\\u5230\\u7ED3\\u679C\\u3002\"))), mdx(\"h3\", null, \"4. \\u7406\\u89E3 props \\u548C state \\u6765\\u8282\\u7701\\u8BA1\\u7B97\"), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u60F3\\u8868\\u8FBE\\u7684\\u662F props \\u548C state \\u5B58\\u5728\\u7684\\u610F\\u4E49\\u5B8C\\u5168\\u4E0D\\u540C\\uFF0C\\u4F46\\u662F\\u53D8\\u66F4\\u90FD\\u80FD\\u5BFC\\u81F4\\u7EC4\\u4EF6\\u6E32\\u67D3\\u3002props \\u548C state \\u5982\\u65E0\\u5FC5\\u8981\\u5C3D\\u91CF\\u5C11\\u8BBE\\u7F6E\\uFF0C\\u800C\\u4E14\\u6BCF\\u4E00\\u4E2A\\u503C\\u90FD\\u8981\\u8FDB\\u884C\\u53D8\\u66F4\\u903B\\u8F91\\u4F18\\u5316\\uFF0C\\u6BD4\\u5982\\u6BCF\\u6B21\\u6E32\\u67D3\\u662F\\u5426\\u4F1A\\u53D8\\u66F4\\uFF0C\\u662F\\u5426\\u4F7F\\u7528\\u4E86\\u7ECF\\u5E38\\u53D1\\u751F\\u53D8\\u5316\\u7684\\u5F15\\u7528\\u503C\\u4E4B\\u7C7B\\u7684\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u4E0B\\u9762\\u793A\\u4F8B columns \\u548C onSelect \\u6BCF\\u6B21 render \\u7684\\u65F6\\u5019\\u90FD\\u4F1A\\u53D8\\u66F4\\uFF0C\\u90FD\\u662F\\u6CA1\\u6709\\u5FC5\\u8981\\u7684\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"class TableDemo extends React.Component {\\n  getColumns = () => {\\n    return [\\n      { key: 'name', title: '\\u59D3\\u540D' },\\n      { key: 'age', title: '\\u5E74\\u9F84' },\\n      { key: 'more', title: `${this.state.action}\\u64CD\\u4F5C` },\\n    ];\\n  };\\n  render() {\\n    return <Table dataSource={this.props.data} columns={this.getColumns()} onSelect={(key) => this.onSelect(key)} />;\\n  }\\n}\\n\")), mdx(\"p\", null, \"state \\u662F\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\uFF1Bprops \\u662F\\u7EC4\\u4EF6\\u7684\\u63A5\\u53E3\\uFF1Bstate \\u7684\\u5B58\\u5728\\u662F\\u4E3A\\u4E86\\u4FDD\\u5B58\\u8BA9 UI \\u54CD\\u5E94\\u53D8\\u5316\\u7684\\u5C5E\\u6027\\uFF0C\\u4E0E\\u5185\\u90E8\\u76F8\\u5173\\uFF0C\\u53EF\\u4EE5\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u903B\\u8F91\\u8FDB\\u884C\\u53D8\\u66F4\\u4FEE\\u6539\\u3002props \\u7684\\u5B58\\u5728\\u662F\\u4E3A\\u4E86\\u63A5\\u6536\\u5916\\u90E8\\u7684\\u72B6\\u6001\\u80FD\\u591F\\u5F71\\u54CD UI \\u7684\\u8F93\\u5165\\uFF0C\\u662F\\u5355\\u5411\\u4F20\\u8F93\\u4E0D\\u53EF\\u4EE5\\u4FEE\\u6539\\u7684\\u3002\\u5BF9\\u4E8E\\u6CA1\\u6709\\u5916\\u90E8\\u526F\\u4F5C\\u7528\\u7684\\u7EC4\\u4EF6\\uFF0Cstate \\u548C props \\u80FD\\u591F\\u786E\\u5B9A\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u7684\\u8868\\u73B0\\u3002\"), mdx(\"p\", null, \"props \\u548C state \\u786E\\u5B9A\\u7EC4\\u4EF6\\u8868\\u73B0\\u6700\\u5E38\\u89C1\\u7684\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://zh-hans.reactjs.org/docs/forms.html#controlled-components\"\n  }, \"\\u53D7\\u63A7\\u7EC4\\u4EF6\"), \"\\u3002\\u4E00\\u4E2A\\u8868\\u5355\\u7EC4\\u4EF6\\uFF0C\\u5916\\u90E8\\u8F93\\u5165\\u521D\\u59CB\\u503C\\uFF0C\\u5185\\u90E8\\u7EF4\\u62A4\\u771F\\u5B9E\\u503C\\uFF0C\\u7136\\u540E\\u901A\\u8FC7\\u5916\\u90E8\\u7684\\u76D1\\u542C\\u51FD\\u6570\\u53CD\\u9988\\u72B6\\u6001\\u53D8\\u66F4\\uFF0C\\u5355\\u4E00\\u6570\\u636E\\u6E90\\u539F\\u5219\\u3002\"), mdx(\"h3\", null, \"5. \\u7406\\u89E3 getDerivedStateFromProps\"), mdx(\"p\", null, \"\\u5B98\\u65B9\\u4E5F\\u6DF1\\u5165\\u7684\\u8BF4\\u4E86\\u8FD9\\u4E2A\\u95EE\\u9898\\uFF1A \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state\"\n  }, \"\\u4F60\\u53EF\\u80FD\\u4E0D\\u9700\\u8981\\u4F7F\\u7528\\u6D3E\\u751F state\"), \"\\u3002\"), mdx(\"p\", null, \"componentWillReceiveProps \\u662F\\u5DEE\\u4E0D\\u591A\\u7684\\u601D\\u60F3\\uFF0C\\u5C31\\u662F\\u5728 props \\u53D8\\u66F4\\u7684\\u65F6\\u5019\\u8FD0\\u884C\\uFF0C\\u4E0D\\u540C\\u7684\\u662F getDerivedStateFromProps \\u662F\\u4E00\\u4E2A\\u65B0\\u7684\\u63A5\\u53E3\\uFF0C\\u800C componentWillReceiveProps \\u5DF2\\u7ECF\\u5E9F\\u5F03\\u4E86\\uFF0C\\u4E3A\\u4EC0\\u4E48\\u5E9F\\u5F03\\u6682\\u4E14\\u4E0D\\u8BF4\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u5468\\u671F\\u51FD\\u6570\\u4E00\\u822C\\u662F\\u5F88\\u4E0D\\u5EFA\\u8BAE\\u4F7F\\u7528\\u7684\\uFF0C\\u56E0\\u4E3A\\u8FD9\\u4E2A\\u51FD\\u6570\\u94A9\\u5B50\\u5B58\\u5728\\u7684\\u76EE\\u7684\\u5728\\u4E8E\\uFF1A\\u8BA9\\u67D0\\u4E2A state \\u5B8C\\u5168\\u4F9D\\u8D56\\u4E0E props \\u7684\\u53D8\\u66F4\\uFF0C\\u8BA9\\u7EC4\\u4EF6\\u5728 props \\u53D8\\u5316\\u65F6\\u66F4\\u65B0 state\\uFF0C\\u9664\\u6B64\\u4E4B\\u5916\\u4E0D\\u5E94\\u8BE5\\u4F7F\\u7528\\u8FD9\\u4E2A\\u63A5\\u53E3\\u3002\\u6BD4\\u5982 props \\u7684 offset \\u53D8\\u5316\\u65F6\\uFF0C\\u4FEE\\u6539\\u5F53\\u524D\\u7684\\u6EDA\\u52A8\\u65B9\\u5411\\u548C\\u6839\\u636E props \\u53D8\\u5316\\u52A0\\u8F7D\\u5916\\u90E8\\u6570\\u636E\\u3002\"), mdx(\"p\", null, \"\\u4E3A\\u4EC0\\u4E48\\u8FD9\\u4E48\\u5F3A\\u8C03\\u5462\\uFF0C\\u56E0\\u4E3A\\u4E0A\\u9762\\u63D0\\u5230\\u7684\\u539F\\u5219\\uFF0Cstate \\u662F\\u5185\\u90E8\\u7684\\uFF0Cprops \\u662F\\u5916\\u90E8\\u7684\\u3002\\u4E0D\\u5E94\\u8BE5\\u4E0B\\u9762\\u8FD9\\u4E24\\u79CD\\u60C5\\u51B5\\uFF0C\\u5B9E\\u9645\\u4E0A\\u5F88\\u591A\\u5B9E\\u8DF5\\u90FD\\u662F\\u8FD9\\u4E48\\u5E72\\u7684\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u76F4\\u63A5\\u590D\\u5236 props \\u5230 state \\u4E0A\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5982\\u679C props \\u548C state \\u4E0D\\u4E00\\u81F4\\u5C31\\u66F4\\u65B0 state\\u3002\")), mdx(\"p\", null, \"\\u8FD9\\u4E48\\u505A\\u6CA1\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u7ECF\\u5E38\\u4F1A\\u51FA\\u73B0\\u4E00\\u4E9B\\u601D\\u60F3\\u4E0A\\u7684\\u95EE\\u9898\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u53D7\\u63A7/\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\"), \"\\u3002\\u5982\\u679C state \\u6839\\u636E props \\u6539\\u53D8\\uFF0C\\u540C\\u65F6\\u8FD8\\u80FD\\u6839\\u636E\\u7528\\u6237\\u64CD\\u4F5C\\u6539\\u53D8\\uFF0C\\u90A3\\u4E48\\u5C31\\u4F1A\\u51FA\\u73B0\\u4E0D\\u4E00\\u81F4\\u7684\\u4F53\\u9A8C\\u3002\\u6BD4\\u5982\\u8868\\u5355\\u4E2D props \\u63A7\\u5236\\u663E\\u793A\\u8FD8\\u662F state \\u63A7\\u5236\\u663E\\u793A\\u7684\\u7EDF\\u4E00\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u53EA\\u8981\\u7236\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u5B50\\u7EC4\\u4EF6\\u7684\\u8FD9\\u4E2A\\u51FD\\u6570\\u5C31\\u4F1A\\u88AB\\u8C03\\u7528\\uFF0C\\u65E0\\u8BBA\\u6709\\u6CA1\\u6709 props \\u6709\\u6CA1\\u6709\\u53D8\\u66F4\\uFF0C\\u7136\\u540E \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5BFC\\u81F4\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\"), \"\\u3002\")), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#fetching-external-data-when-props-change\"\n  }, \"\\u5F53 props \\u53D8\\u5316\\u65F6\\uFF0C\\u8FDB\\u884C\\u8BA1\\u7B97\"), \"\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"class ExampleComponent extends React.Component {\\n  state = {\\n    externalData: null,\\n  };\\n\\n  static getDerivedStateFromProps(props, state) {\\n    // Store prevId in state so we can compare when props change.\\n    // Clear out previously-loaded data (so we don't render stale stuff).\\n    if (props.id !== state.prevId) {\\n      return {\\n        externalData: null,\\n        prevId: props.id,\\n      };\\n    }\\n    // No state update necessary\\n    return null;\\n  }\\n\\n  componentDidMount() {\\n    this._loadAsyncData(this.props.id);\\n  }\\n\\n  componentDidUpdate(prevProps, prevState) {\\n    if (this.state.externalData === null) {\\n      this._loadAsyncData(this.props.id);\\n    }\\n  }\\n\\n  componentWillUnmount() {\\n    if (this._asyncRequest) {\\n      this._asyncRequest.cancel();\\n    }\\n  }\\n\\n  render() {\\n    if (this.state.externalData === null) {\\n      // Render loading state ...\\n    } else {\\n      // Render real UI ...\\n    }\\n  }\\n\\n  _loadAsyncData(id) {\\n    this._asyncRequest = loadMyAsyncData(id).then(\\n      externalData => {\\n        this._asyncRequest = null;\\n        this.setState({externalData});\\n      }\\n    );\\n  }\\n}\\n\")), mdx(\"h3\", null, \"6. \\u7406\\u89E3 memo \\u7F13\\u5B58\\u8BA1\\u7B97\\u548C\\u7EC4\\u4EF6\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u8017\\u65F6\\u8BA1\\u7B97\\u7684\\u7F13\\u5B58\")), mdx(\"p\", null, \"\\u4E0A\\u9762\\u8BF4\\u4E86\\u53D7\\u63A7\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF0C\\u5C3D\\u91CF\\u4E0D\\u80FD\\u76F4\\u63A5\\u5C06 props \\u590D\\u5236\\u5230 state \\u7684\\u5B9E\\u8DF5\\u539F\\u5219\\uFF0C\\u90A3\\u4E48\\u600E\\u4E48\\u624D\\u80FD\\u5C06\\u590D\\u6742\\u7684 props \\u8BA1\\u7B97\\u7F13\\u5B58\\u4EE5\\u907F\\u514D\\u590D\\u6742\\u7684\\u8BA1\\u7B97\\uFF1F\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import memoize from \\\"memoize-one\\\";\\n\\nclass Example extends Component {\\n  // state \\u53EA\\u9700\\u8981\\u4FDD\\u5B58\\u5F53\\u524D\\u7684 filter \\u503C\\uFF1A\\n  state = { filterText: \\\"\\\" };\\n\\n  // \\u5728 list \\u6216\\u8005 filter \\u53D8\\u5316\\u65F6\\uFF0C\\u91CD\\u65B0\\u8FD0\\u884C filter\\uFF1A\\n  filter = memoize(\\n    (list, filterText) => list.filter(item => item.text.includes(filterText))\\n  );\\n\\n  handleChange = event => {\\n    this.setState({ filterText: event.target.value });\\n  };\\n\\n  render() {\\n    // \\u8BA1\\u7B97\\u6700\\u65B0\\u7684\\u8FC7\\u6EE4\\u540E\\u7684 list\\u3002\\n    // \\u5982\\u679C\\u548C\\u4E0A\\u6B21 render \\u53C2\\u6570\\u4E00\\u6837\\uFF0C`memoize-one` \\u4F1A\\u91CD\\u590D\\u4F7F\\u7528\\u4E0A\\u4E00\\u6B21\\u7684\\u503C\\u3002\\n    const filteredList = this.filter(this.props.list, this.state.filterText);\\n\\n    return (\\n      <Fragment>\\n        <input onChange={this.handleChange} value={this.state.filterText} />\\n        <ul>{filteredList.map(item => <li key={item.id}>{item.text}</li>)}</ul>\\n      </Fragment>\\n    );\\n  }\\n}\\n\")), mdx(\"p\", null, \"\\u7B54\\u6848\\u5C31\\u662F\\u4F7F\\u7528 memoize \\u7F13\\u5B58\\u8BA1\\u7B97\\uFF0C\\u53EF\\u4EE5\\u76F4\\u63A5\\u4F7F\\u7528 props \\u7684\\u503C\\uFF0C\\u4F46\\u662F\\u4E0D\\u5FC5\\u8BA1\\u7B97\\u989D\\u5916\\u7684 state\\u3002\\u8FD9\\u4E2A\\u601D\\u60F3\\u4E5F\\u662F\\u5F88\\u591A\\u6781\\u81F4\\u6027\\u80FD\\u7684\\u4E00\\u4E2A\\u5F88\\u91CD\\u8981\\u7684\\u5B9E\\u8DF5\\u3002\"), mdx(\"p\", null, \"\\u5728 React \\u51FD\\u6570\\u4E2D\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useMemo\"), \" \\u6765\\u7F13\\u5B58\\u8BA1\\u7B97\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u51FD\\u6570\\u7EC4\\u4EF6\\u7684\\u7F13\\u5B58\")), mdx(\"p\", null, \"\\u7236\\u7EC4\\u4EF6\\u548C\\u672C\\u8EAB\\u7684\\u72B6\\u6001\\u51B3\\u5B9A\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u662F\\u5426\\u8981\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u4F46\\u662F\\u5F88\\u591A\\u7684\\u7EC4\\u4EF6\\u6E32\\u67D3\\u5E76\\u6CA1\\u6709\\u5FC5\\u8981\\u3002\"), mdx(\"p\", null, \"class \\u7EC4\\u4EF6\\u672C\\u8EAB\\u80FD\\u591F\\u62E6\\u622A\\u6E32\\u67D3\\u51FD\\u6570\\uFF0C\\u6700\\u7EC8\\u4E5F\\u80FD\\u88AB shouldComponentUpdate \\u62E6\\u622A\\u8FD9\\u4E2A\\u6E32\\u67D3\\u51B3\\u5B9A\\uFF0C\\u6709\\u81EA\\u5DF1\\u7684\\u4E3B\\u6743\\u3002\\u4F46\\u662F\\u51FD\\u6570\\u7EC4\\u4EF6\\u53EA\\u8981\\u6D41\\u7A0B\\u8D70\\u5230\\u51FD\\u6570\\u7EC4\\u4EF6\\u8FD9\\u91CC\\uFF0C\\u90A3\\u4E48\\u6574\\u4E2A\\u51FD\\u6570\\u672C\\u8EAB\\u5C31\\u4F1A\\u6267\\u884C\\u5230\\u5E95\\uFF0C\\u5305\\u62EC\\u5176\\u4E2D\\u7684\\u5B50\\u7EC4\\u4EF6\\uFF0C\\u5982\\u679C\\u4E0D\\u52A0\\u4EFB\\u4F55\\u63A7\\u5236\\uFF0C\\u6839\\u7EC4\\u4EF6\\u7684\\u4E00\\u4E2A\\u72B6\\u6001\\u53D8\\u66F4\\uFF0C\\u5168\\u5C40\\u7684\\u5168\\u90E8\\u7EC4\\u4EF6\\u90FD\\u4F1A\\u6E32\\u67D3\\uFF0C\\u9020\\u6210\\u975E\\u5E38\\u5927\\u7684\\u5361\\u987F\\u3002\"), mdx(\"p\", null, \"\\u51FD\\u6570\\u7EC4\\u4EF6\\u6709\\u6CA1\\u6709\\u7C7B\\u4F3C PureComponent \\u6216\\u8005 shouldComponentUpdate \\u7684\\u4E1C\\u897F\\u5462\\uFF1F\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"React.memo\"), \" \\u8FD9\\u4E2A\\u4E1C\\u897F\\u80FD\\u591F\\u4EE3\\u66FF\\u524D\\u4E24\\u4E2A\\u7684\\u4F5C\\u7528\\u3002\"), mdx(\"p\", null, \"React \\u6709\\u9876\\u5C42\\u7684\\u51FD\\u6570\\u63A5\\u53E3 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"React.memo\"), \" \\u6765\\u5B9E\\u73B0\\u7EC4\\u4EF6\\u7EA7\\u522B\\u7684\\u7F13\\u5B58\\uFF0C\\u53EF\\u4EE5\\u4FDD\\u8BC1\\u5728\\u76F8\\u540C\\u7684 props \\u8F93\\u5165\\u60C5\\u51B5\\u4E0B\\u6E32\\u67D3\\u76F8\\u540C\\u7684\\u7ED3\\u679C\\uFF0C\\u7F13\\u5B58\\u7EC4\\u4EF6\\u7684\\u8BA1\\u7B97\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const MyComponent = React.memo(function MyComponent(props) {\\n  /* \\u4F7F\\u7528 props \\u6E32\\u67D3 */\\n});\\n\")), mdx(\"p\", null, \"\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F\\u8FD9\\u91CC\\u7684 props \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u76F8\\u540C\"), \" \\u8FD8\\u662F\\u4E0A\\u9762\\u8BF4\\u7684\\u3010\\u6D45\\u6BD4\\u8F83\\u3011\\uFF0C\\u4E0D\\u8FC7\\u53EF\\u4EE5\\u901A\\u8FC7\\u7B2C\\u4E8C\\u53C2\\u6570\\u6307\\u5B9A\\u6BD4\\u8F83\\u51FD\\u6570\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"function MyComponent(props) {\\n  /* \\u4F7F\\u7528 props \\u6E32\\u67D3 */\\n}\\nfunction areEqual(prevProps, nextProps) {\\n  /*\\n  \\u5982\\u679C\\u628A nextProps \\u4F20\\u5165 render \\u65B9\\u6CD5\\u7684\\u8FD4\\u56DE\\u7ED3\\u679C\\u4E0E\\n  \\u5C06 prevProps \\u4F20\\u5165 render \\u65B9\\u6CD5\\u7684\\u8FD4\\u56DE\\u7ED3\\u679C\\u4E00\\u81F4\\u5219\\u8FD4\\u56DE true\\uFF0C\\n  \\u5426\\u5219\\u8FD4\\u56DE false\\n  */\\n}\\nexport default React.memo(MyComponent, areEqual);\\n\")), mdx(\"h3\", null, \"7. \\u7406\\u89E3\\u751F\\u547D\\u5468\\u671F\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/28589c0053b1c16dd40d62016802ac5e/511b8/lifecycle.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"58.301158301158296%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACE0lEQVQoz21Ti27bMAzM///dhibr2sR2Y1m2Jfkl62U3zY1Ul2EdJoCQSNHHO4o+3O93sPHa9x3eB/R9T7vHtm2IMSKlhBACuq6Dcy77D+N7rTWWZcn5hwcgG380TxOOxyOGYcgfL4vNReZ5xul0gjEm5/GdtRbruuL5+Rl1XWcSB/y1rEsoW4fjWeLS2Oy7dcZgNGIg8Hki38JohXE0GZRBuAAzZT8D3m43YvhBABFvvcfL24Cqc2i0x7UdUQkDqW0+d4OHUBZSzRngU8XyB/zADksRooYLCXKIkIb6NRJbOWe2T68SP6lIIS2EiWhMQkvALPch/QF+4MZyU7lHiWhv0SGQzBRW3DYPNazEWOPl3OAHgathwR6pr275A/IF8GsPI2qdUJHsWkdik3CRK54uGkVhUKsNYrzhqmnX/DBfGWbJfGCGhhq/ugA10diMjnYPzWe66zqBTncQzRWyFVB0nibzf8n8Qjx3PCb7vuHjtpF0j/c9kiXcU497KGHVCUPzHVP3hN2eKS7zy+7vO2KKeYbZDjyMSqk8bx+7A1IJ+HPe03TC3H6D7Y/Y5lcgVjT9Ne0lFWmo4Dv+XVly0wiMw4i0BXq9GoV4wbUr4MOCyZLkSdCoVJ/x9gK9SCx+QIicL2kaCsp/o7j6/FMei6mXosTlekFREyBJt8FSokbVVDnO1k09Zj9nwLIpf8fPaI3EL6hXkSpMJITHAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"React 生命周期\",\n    \"title\": \"React 生命周期\",\n    \"src\": \"/static/28589c0053b1c16dd40d62016802ac5e/0dc48/lifecycle.png\",\n    \"srcSet\": [\"/static/28589c0053b1c16dd40d62016802ac5e/2c191/lifecycle.png 259w\", \"/static/28589c0053b1c16dd40d62016802ac5e/86b01/lifecycle.png 518w\", \"/static/28589c0053b1c16dd40d62016802ac5e/0dc48/lifecycle.png 1035w\", \"/static/28589c0053b1c16dd40d62016802ac5e/511b8/lifecycle.png 1117w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"React \\u751F\\u547D\\u5468\\u671F\"), \"\\n  \")), mdx(\"p\", null, \"\\u5206\\u6E05\\u54EA\\u4E9B\\u662F\\u72B6\\u6001\\u53D8\\u66F4\\u3001\\u54EA\\u4E9B\\u662F\\u526F\\u4F5C\\u7528\\u3001\\u54EA\\u4E9B\\u662F\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\\u3002\\u751F\\u547D\\u5468\\u671F\\u5728\\u7EC4\\u4EF6\\u7684\\u6302\\u8F7D\\u3001\\u66F4\\u65B0\\u548C\\u9500\\u6BC1\\u65F6\\u90FD\\u4F1A\\u6267\\u884C\\u5BF9\\u5E94\\u7684\\u94A9\\u5B50\\u51FD\\u6570\\uFF0C\\u6240\\u4EE5\\u533A\\u5206\\u5177\\u4F53\\u7684\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u5F04\\u6E05\\u526F\\u4F5C\\u7528\\uFF0C\\u7136\\u540E\\u7F13\\u5B58\\u8017\\u65F6\\u7684\\u8BA1\\u7B97\\uFF0C\\u5728\\u5408\\u9002\\u7684\\u751F\\u547D\\u5468\\u671F\\u4E2D\\u505A\\u6B63\\u786E\\u7684\\u4E8B\\u60C5\\u3002\"), mdx(\"h3\", null, \"8. \\u7406\\u89E3 Fiber \\u548C Scheduler \\u7684\\u8BA1\\u7B97\\u8C03\\u5EA6\"), mdx(\"p\", null, \"\\u5728\\u5B8C\\u5584\\u4E86\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\\u548C\\u7F13\\u5B58\\u4E4B\\u540E\\uFF0C\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u8003\\u8651\\u6574\\u4E2A\\u7528\\u6237\\u754C\\u9762\\u4EA4\\u4E92\\u7684\\u5168\\u5C40\\u8282\\u594F\\u6765\\u770B\\uFF0C\\u6027\\u80FD\\u95EE\\u9898\\u672C\\u8D28\\u4E0A\\u5176\\u5B9E\\u662F\\u8C03\\u5EA6\\u95EE\\u9898\\uFF0C\\u5982\\u4F55\\u8C03\\u5EA6 IO \\u548C CPU \\u4EFB\\u52A1\\uFF1F\"), \" \\u6BD4\\u5982\\u73B0\\u5728\\u60F3\\u8981\\u8BA1\\u7B97\\u6E32\\u67D3\\u591A\\u4E2A\\u7EC4\\u4EF6\\u3001\\u7F51\\u7EDC\\u6B63\\u5728\\u83B7\\u53D6\\u6570\\u636E\\u3001\\u7528\\u6237\\u6B63\\u5728\\u70B9\\u51FB\\u67D0\\u4E2A\\u6309\\u94AE\\u8FD9\\u4E9B\\u4EFB\\u52A1\\uFF0C\\u5982\\u679C\\u4E00\\u80A1\\u8111\\u7684\\u5168\\u585E\\u7ED9 Call Stack\\uFF0C\\u53EF\\u80FD\\u4F1A\\u51FA\\u73B0\\u7EC4\\u4EF6\\u6E32\\u67D3\\u5360\\u7528\\u592A\\u591A\\u65F6\\u95F4\\u6CA1\\u6709\\u76F8\\u5E94\\u7528\\u6237\\u70B9\\u51FB\\uFF0C\\u53EF\\u80FD\\u4F1A\\u51FA\\u73B0\\u6E32\\u67D3\\u5361\\u5728\\u4E86\\u7F51\\u7EDC\\u6570\\u636E\\u7684\\u7B49\\u5F85\\u4E0A\\u4E4B\\u7C7B\\u7684\\u5E7F\\u4E49\\u4E0A\\u7684\\u6027\\u80FD\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u5757\\u53EF\\u80FD\\u5E76\\u4E0D\\u662F\\u7F16\\u7801\\u8FC7\\u7A0B\\u4E2D\\u9700\\u8981\\u6D89\\u53CA\\u5230\\u7684\\uFF0C\\u4F46\\u662F\\u5176\\u4E2D\\u7684\\u601D\\u60F3\\u8FD8\\u662F\\u5F88\\u503C\\u5F97\\u4E86\\u89E3\\u4E0B\\uFF0C\\u4ECE Fiber \\u548C Scheduler \\u80FD\\u770B\\u5230 React \\u5728\\u6574\\u4E2A\\u6E32\\u67D3\\u8FC7\\u7A0B\\u4E2D\\u7684\\u8BA1\\u7B97\\u4EFB\\u52A1\\u8C03\\u5EA6\\u3002React \\u9664\\u4E86\\u63D0\\u4F9B\\u4E86\\u4E00\\u5957\\u54CD\\u5E94\\u5F0F\\u7684\\u7F16\\u7A0B\\u4F53\\u9A8C\\u6846\\u67B6\\u80FD\\u529B\\uFF0C\\u8FD8\\u8003\\u8651\\u5230\\u4E86\\u5728\\u8FD9\\u4E2A\\u6846\\u67B6\\u4E0B\\u7684\\u91CD\\u5EA6\\u8BA1\\u7B97\\u4F18\\u5316\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A\\u4ECE\\u5C0F\\u5230\\u7EC4\\u4EF6\\uFF0C\\u5927\\u5230\\u5E94\\u7528\\u7684\\u5C3A\\u5EA6\\u4E0A\\uFF0C\\u518D\\u52A0\\u4E0A\\u7EC4\\u4EF6\\u7684\\u5C42\\u7EA7\\u5C01\\u88C5\\uFF0C\\u4EFB\\u4F55\\u7684\\u904D\\u5386\\u548C\\u9012\\u5F52\\u6E32\\u67D3\\u90FD\\u53EF\\u80FD\\u6D89\\u53CA\\u5230\\u4E0D\\u53EF\\u63A7\\u7684 CPU \\u6267\\u884C\\u65F6\\u957F\\u3002\"), mdx(\"p\", null, \"Fiber \\u662F\\u8BA9\\u7EC4\\u4EF6\\u7684\\u8BA1\\u7B97\\u5206\\u7247\\u5F0F\\u6267\\u884C\\uFF0C\\u76EE\\u7684\\u662F\\u907F\\u514D\\u7EC4\\u4EF6\\u6E32\\u67D3\\u8FC7\\u7A0B\\u4E2D\\u5360\\u7528\\u592A\\u957F\\u65F6\\u95F4\\u7684 CallStack\\uFF0C\\u5BFC\\u81F4\\u65E0\\u6CD5\\u54CD\\u5E94\\u7684\\u95EE\\u9898\\uFF0C\\u8BA9\\u6E32\\u67D3\\u4EFB\\u52A1\\u80FD\\u591F\\u6839\\u636E\\u8C03\\u5EA6\\uFF0C\\u80FD\\u591F\\u88AB\\u6253\\u65AD\\u7EC8\\u6B62\\uFF0C\\u5B9E\\u73B0\\u8BA1\\u7B97\\u8FC7\\u7A0B\\u4E2D\\u6743\\u5229\\u7684\\u63A7\\u5236\\uFF0C\\u53EF\\u4EE5\\u7406\\u89E3\\u4E3A React \\u63A5\\u7BA1\\u4E00\\u5B9A\\u65F6\\u95F4\\u540E\\u4E3B\\u52A8\\u5C06\\u8BA1\\u7B97\\u8C03\\u5EA6\\u6743\\u5229\\u4EA4\\u7ED9\\u6D4F\\u89C8\\u5668\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C\\u3002\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://juejin.im/post/5dadc6045188255a270a0f85\"\n  }, \"React Fiber\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u6240\\u4EE5 React \\u901A\\u8FC7 Fiber \\u67B6\\u6784\\uFF0C\\u8BA9\\u81EA\\u5DF1\\u7684 Reconcilation \\u8FC7\\u7A0B\\u53D8\\u6210\\u53EF\\u88AB\\u4E2D\\u65AD\\u3002'\\u9002\\u65F6' \\u5730\\u8BA9\\u51FA CPU \\u6267\\u884C\\u6743\\u53EF\\u4EE5\\u53CA\\u65F6\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C\\u3001\\u5EF6\\u65F6\\u64CD\\u4F5C DOM\\u3001\\u8BA9\\u6D4F\\u89C8\\u5668\\u7684\\u8FD0\\u884C\\u66F4\\u597D\\u7684\\u7F16\\u8BD1\\u4F18\\u5316\\u3002\")), mdx(\"p\", null, \"scheduler \\u7528\\u6765\\u505A\\u4EFB\\u52A1\\u8C03\\u5EA6\\uFF0C\\u5B9E\\u73B0 time slicing \\u6700\\u6838\\u5FC3\\u7684\\u529F\\u80FD\\uFF0C\\u8BA9 React \\u53EF\\u4EE5\\u968F\\u65F6\\u6682\\u505C\\u3001\\u6062\\u590D\\u67D0\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u7684\\u6E32\\u67D3\\uFF0C\\u5B9E\\u73B0\\u6BD4\\u5982 Suspense \\u7B49\\u6E32\\u67D3\\u6682\\u505C\\u6548\\u679C\\u7684\\u529F\\u80FD\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/novus-2\"\n  }, \"\\uD83D\\uDCE6 \\u6539\\u8FDB\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42 NOVUS\"), \" \\u6587\\u7AE0\\u4E2D\\u56E0\\u4E3A\\u540C\\u6B65\\u6267\\u884C\\uFF0C\\u53EF\\u80FD\\u5BFC\\u81F4\\u7684\\u963B\\u585E\\uFF0C\\u5BF9\\u5E94\\u7684\\u5598\\u606F\\u673A\\u5236\\u662F\\u66F4\\u7B80\\u5355\\u7684\\u6A21\\u578B\\uFF0C\\u4E0E\\u4E4B\\u7C7B\\u4F3C\\u3002\")), mdx(\"h2\", null, \"\\u4E94\\u3001\\u5E38\\u89C1\\u6280\\u5DE7\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u7684\\u77E5\\u8BC6\\u91CC\\u9762\\u8BF4\\u4E86\\u5F88\\u591A\\uFF0C\\u8FD9\\u91CC\\u7B80\\u5355\\u5217\\u51FA\\u6765\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"React.PureComponent \\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5C06\\u53C2\\u6570\\u4F20\\u9012\\u548C\\u5185\\u90E8\\u72B6\\u6001\\u5C3D\\u53EF\\u80FD\\u62C6\\u5206\\u4E3A\\u57FA\\u7840\\u6570\\u636E\\u7C7B\\u578B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"React.memo \\u7F13\\u5B58\\u51FD\\u6570\\u7EC4\\u4EF6\\uFF0Cmemoize \\u7F13\\u5B58\\u8BA1\\u7B97\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8282\\u6D41\\uFF08throttling\\uFF09\\u548C\\u9632\\u6296\\uFF08debouncing\\uFF09\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5728\\u590D\\u6742\\u7684\\u72B6\\u6001\\u548C\\u53C2\\u6570\\u7EC4\\u4EF6\\u4E2D\\u4F7F\\u7528 shouldComponentUpdate \\u62E6\\u622A\\u4E0D\\u5FC5\\u8981\\u7684\\u66F4\\u65B0\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u61D2\\u52A0\\u8F7D\\u3001\\u5305\\u62C6\\u5206\\u3001\\u516C\\u5171\\u4F9D\\u8D56\\u62C6\\u5206\\u7B49\\u624B\\u6BB5\\u63D0\\u5347\\u52A0\\u8F7D\\u6027\\u80FD\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u907F\\u514D\\u5728 props \\u4E2D\\u4F20\\u9012\\u5185\\u8054\\u533F\\u540D\\u51FD\\u6570\\uFF0C\\u4EE5\\u53CA\\u52A8\\u6001\\u83B7\\u53D6\\u6570\\u636E\\u903B\\u8F91\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u628A\\u8BF7\\u6C42\\u7B49\\u526F\\u4F5C\\u7528\\u90E8\\u5206\\u653E\\u5230 componentDidUpdate \\u548C componentDidMount \\u94A9\\u5B50\\u51FD\\u6570\\u4E2D\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6700\\u597D\\u5728\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u7ED1\\u5B9A this\\uFF0C\\u4E0D\\u6D4E\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528 \\u5C5E\\u6027\\u7B49\\u4E8E\\u7BAD\\u5934\\u51FD\\u6570\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5217\\u8868\\u7EC4\\u4EF6\\u6DFB\\u52A0\\u552F\\u4E00 key\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\u7ED3\\u6784 immutable\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4F7F\\u7528 SSR\")), mdx(\"h2\", null, \"\\u516D\\u3001\\u6700\\u540E\"), mdx(\"p\", null, \"\\u6027\\u80FD\\u7684\\u4F18\\u5316\\u5C31\\u662F\\u8981\\u51CF\\u5C11\\u4E0D\\u5FC5\\u8981\\u7684\\u52A0\\u8F7D\\u3001\\u8BA1\\u7B97\\u3001\\u6E32\\u67D3\\u7B49\\uFF0C\\u6240\\u4EE5\\u7F13\\u5B58\\u3001\\u5EF6\\u8FDF\\u3001\\u9884\\u52A0\\u8F7D\\u7B49\\u624B\\u6BB5\\u90FD\\u662F\\u4E00\\u6837\\u7684\\u5957\\u8DEF\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}